DEV Community: Shubham Singh Kshatriya

How to fetch current location of user in Flutter?

Shubham Singh Kshatriya — Wed, 17 Nov 2021 19:59:26 +0000

Introduction:

There are times when we want to access the end user's GPS location. Be it an E-commerce industry or a food delivery app, accessing the GPS location is needed to offer better user experience and provide better services.

In this article, we will see how to fetch a user's location and display the address in Flutter using the location plugin.

Setup

Go to pubspec.yaml file and add location plugin under dependencies and then run flutter pub get.

dependencies:
  location: ^4.2.0

Android

If the project was created with Flutter 1.12 and above, all dependencies will be installed automatically.

If the project was created before Flutter 1.12, follow the steps below.
Go to android/app/src/main/AndroidManifest.xml and add the following code inside the application tag.

<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>

iOS

Go to ios/Runner/Info.plist and add the following permission.

<key>NSLocationWhenInUseUsageDescription</key>
<key>NSLocationAlwaysUsageDescription</key>

With this, we are all set to use the location plugin in our Flutter application.

Implementation

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geocoder/geocoder.dart';
import 'package:location/location.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Location',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: getLocation(),
    );
  }
}

class getLocation extends StatefulWidget {
  @override
  _MyLocationState createState() => _MyLocationState();
}

class _MyLocationState extends State<getLocation> {
  LocationData _currentPosition;
  String _address;
  Location location = new Location();

  @override
  void initState() {
    super.initState();
    fetchLocation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Location"),
      ),
      body: Container(
        child: SafeArea(
          child: Column(
            children: [
              if (_currentPosition)
                Text(
                  "Latitude: ${_currentPosition.latitude}",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
                ),
              if (_currentPosition)
                Text(
                  "Longitude: ${_currentPosition.longitude}",
                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
                ),
              if (_address)
                Text(
                  "Address: $_address",
                  style: TextStyle(
                    fontSize: 16,
                  ),
                ),
            ],
          ),
        ),
      ),
    );

  fetchLocation() async {}
  Future<List<Address>> getAddress(double lat, double lang) async {}
  }

Here, we have imported two libraries location and geocoding that will be used to fetch the GPS location and to convert a co-ordinate into Address respectively.

We have also created two functions at the bottom and invoked fetchLocation in the initState() method. When the app will start, it will fetch the GPS location of the user asynchronously and update the Text widget used in the Container.

Let's see how the fetchLocation method will be like.

fetchLocation()

In order to request location, we need to manually check if Location Service status and Permission status are available every time.

If we have both the permissions then only we can fetch the location using the getLocation() method. We can also get continuous callbacks when the position changes using onLocationChanged event listener.

fetchLocation() async {
    bool _serviceEnabled;
    PermissionStatus _permissionGranted;

    _serviceEnabled = await location.serviceEnabled();
    if (!_serviceEnabled) {
      _serviceEnabled = await location.requestService();
      if (!_serviceEnabled) {
        return;
      }
    }

    _permissionGranted = await location.hasPermission();
    if (_permissionGranted == PermissionStatus.denied) {
      _permissionGranted = await location.requestPermission();
      if (_permissionGranted != PermissionStatus.granted) {
        return;
      }
    }

    _currentPosition = await location.getLocation();
    location.onLocationChanged.listen((LocationData currentLocation) {
      setState(() {
        _currentPosition = currentLocation;
        getAddress(_currentPosition.latitude, _currentPosition.longitude)
            .then((value) {
          setState(() {
            _address = "${value.first.addressLine}";
          });
        });
      });
    });
  }

getAddress()

Once we get the geographic co-ordinates of the user, we use the getAddress() method to parse it into an address.

The geocoder provides a findAddressesFromCoordinates() method for it.

  Future<List<Address>> getAddress(double lat, double lang) async {
    final coordinates = new Coordinates(latitude, longitude);
    List<Address> address =
        await Geocoder.local.findAddressesFromCoordinates(coordinates);
    return address;
  }
}

With this, we have added the location plugin in our Flutter Application. On running the application the output should look like this.

Thanks for the read. I hope this article helped you to get started with Location plugin in Flutter.

You can connect with me on Twitter for any discussion.

Happy Coding!

How to add Google Maps plugin in Flutter?

Shubham Singh Kshatriya — Sat, 13 Nov 2021 08:31:17 +0000

Introduction

Nowadays, having a map interface in an application is quite common to efficiently convey details of places, directions and routes to the user.

In this article, we will see how to integrate Google Maps plugin in Flutter using the Google Maps Flutter package.

Create a GCP project
Add Google Maps SDK (for both Android & iOS)
Create an API key
Setup Flutter application
Add Google Maps widget.

Creating a GCP project

To use Google Maps plugin, we need a GCP project and its corresponding API key. To create a new GCP project, follow the below steps.

Head over to GCP console.
Open Select a project dialog and click on New Project.
Enter project name and click on Create.

With this, we have created the GCP project.

You can find the official documentation to create GCP project here.

Adding Google Maps SDK

To use Google Maps plugin, we need to add Maps SDK for both Android & iOS. To add the required SDK, follow the below steps.

Go to APIs & Services from the Navigation menu and select Library.
Search for Maps and enable Maps SDK for both Android & iOS.

With this, we have added the required Maps SDK.

Creating an API key

At last, we need an API key to connect our Flutter application with this GCP project. To create an API key, follow the below steps.

Go to APIs & Services from the Navigation menu and select Credentials.
Click CREATE CREDENTIALS and select API key.

With this, we have created the API key that we will be using later in the flutter application.

Setting up Flutter application

Create a new Flutter project and open it in favorite IDE.

flutter create fluttermap

Go to pubspec.yaml file and add google_maps_flutter plugin under dependencies and then run flutter pub get.

dependencies:
  ...
  google_maps_flutter: ^2.1.0

Android setup

Set the minSdkVersion in android/app/build.gradle.

android {
    defaultConfig {
        minSdkVersion 20
    }
}

Go to android/app/src/main/AndroidManifest.xml and add the following code inside the application tag.

<meta-data android:name="com.google.android.geo.API_KEY"
           android:value="YOUR KEY HERE"/>

Add the following code under manifest tag.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

iOS setup

Go to ios/Runner/AppDelegate.swift and replace the entire code with the following.

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Go to ios/Runner/Info.plist and add the following code.

<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Access.</string>

With this, we have completed the setup to use Google Maps plugin.

Adding Google Maps Widget.

Let's create a base where we will add the Map.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Map(),
    );
  }
}

class Map extends StatefulWidget {
  @override
  _MapState createState() => _MapState();
}

class _MapState extends State<Map> {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;

    return Container(
      height: height,
      width: width,
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            // Todo: Add Map
          ],
        ),
      ),
    );
  }
}

We will be using Stateful Widget inside which we had created a Container. As the child of Container, we are using a Scaffold widget whose body is the Stack widget. We will keep the Map in the background and every other widget on the top of it.

We have also calculated the width and height of the screen, so that the Map can cover it entirely.

Now, let's add the Google Map widget.

// import package
import 'package:google_maps_flutter/google_maps_flutter.dart';

// set an initial location of the Map
CameraPosition _initialCameraPosition = CameraPosition(target: LatLng(20.5937, 78.9629));

// add this to control the Map
GoogleMapController googleMapController;

// Replace "Todo: Add Map" with the following
GoogleMap(
  initialCameraPosition: _initialCameraPosition ,
  myLocationEnabled: true,
  myLocationButtonEnabled: true,
  mapType: MapType.normal,
  zoomGesturesEnabled: true,
  zoomControlsEnabled: true,
  onMapCreated: (GoogleMapController c) {
    // to control the camera position of the map
    googleMapController = c;
  },
),

Let’s explore the parameters that are used in the Google Maps widget.

initialCameraPosition: To load the map view on initial start up. It's a required parameter.
myLocationEnabled: To show current location on the map with a blue dot.
myLocationButtonEnabled: To bring the user location to the center of the map.
mapType: To specify the displayed map type. Possible values are normal, satellite, hybrid and terrain.
zoomGesturesEnabled: To determine whether the map should respond to zoom gestures.
zoomControlsEnabled: To show zoom controls.
onMapCreated: A callback function that gets executed when the map is ready.

With this, we have added the Google Map Widget in our Flutter Application. On running the application the output should look like this.

Thanks for the read. I hope this article helped you to get started with Google Maps in Flutter.

You can connect with me on Twitter for any discussion.

Happy Coding!

JS Array methods: Which method to use to...?

Shubham Singh Kshatriya — Sat, 06 Nov 2021 13:47:01 +0000

Arrays are list-like objects whose prototype provides various methods to perform many operations. Did you ever thought what are the different use-cases where these methods can be used?

The answer to this question can be found using: I WANT TO...

1. Mutate the original array

Add an element

push(): Adds one or more elements to the end of an array and returns the new length of the array.
unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

Remove an element

pop(): Removes the last element from an array and returns that element.
shift(): Removes the first element from an array and returns that element.
splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

Others:

fill(): Changes all elements in an array to a static value.
sort(): Sorts an array.
reverse(): Reverses an array.

2. Create a new array from original array

Portion of array

slice(): Returns a shallow copy of a portion of an array into a new array.

Computed from array.

map(): Creates a new array from an existing one by applying a function to each one of the elements of the existing array.
reduce(): Reduces an array of values down to just one value.
filter(): Takes each element in an array and applies a conditional statement against it. If this conditional returns true, the element gets pushed to the new array.

Merge into array

concat(): Merges two or more arrays.

Flatten the array:

flat(): Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
flatMap(): Returns a new array formed by applying a given callback function to each element of the existing array, and then flattening the result by one level.

3. Find the

Index of element

findIndex(): Returns the index of the first element in the array that satisfies the given condition. Otherwise, it returns -1.

Array element

find(): Returns the first element in the array that satisfies the given condition. Otherwise, it returns undefined.

4. Check if array contains an element

Using a condition

some(): Returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.
every(): Returns true if, in the array, it finds all the element returns true for the provided function; otherwise it returns false.

Using a value

includes(): Checks whether an array includes a certain value, returning true or false as appropriate.

5. Loop the array

forEach(): Executes a provided function once for each array element.

6. Join the array elements

join(): Creates and returns a new string by concatenating all of the elements in an array

How to build a Email Newsletter Subscriber in Django?

Shubham Singh Kshatriya — Sun, 18 Jul 2021 17:44:37 +0000

An email newsletter is an email that is sent out on a regular basis (e.g. weekly or monthly) to certain users. As you’ll probably know by looking at your inboxes, email newsletters are a popular medium for businesses. Stats says that 85% of B2B marketers send email newsletters as part of their content marketing strategy.

In this article we will build our own email newsletter subscriber using Django and AJAX.

Requirements: Basics of Django and AJAX. You can refer to this article if you wanna learn how to use AJAX in Django.

Setting up UI

index.html

This is the HTML file which will contain the UI. As you may have noticed, we will use bootstrap 4 components and some custom CSS. PS: Make sure to include csrf_token in the form :)



{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        crossorigin="anonymous">
    <title>Newsletter Subscribtion Example</title>
    <link rel="stylesheet" href="{% static 'assets/app.css' %}">
</head>
<body>
    <div class="col-lg-6 col-md-6" style="margin: 100px auto; display: block;">
        <form enctype="multipart/form-data" method="POST" action="" style="text-align: center;">
            {% csrf_token %}
            <div class="form-group">
                <label>Subscribe to our Newsletter.</label>
                <input type="email" class="form-control" id="userEmail" placeholder="Enter email" required>
                <small style="font-weight: 600;color: red;" class="error"></small>
                <input type="text" class="form-control mt-2" id="userName" placeholder="Enter name" required>
                <small style="font-weight: 600;color: green;" class="success"></small>
            </div>
            <input type="submit" value="Subscribe" id="submit" class="btn">     
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'assets/app.js' %}"></script>
</body>
</html>

app.css

Let's add some of our own CSS to make our UI more aligned.



label {
    font-size: 22px;
    font-weight: bold;
}

.btn {
    padding: 7px 21px;
    background-color: rgb(143, 1, 1);
    color: white;
    font-size: 18px;
}

body {
    background-color: azure;
}

This is how our UI will appear.

app.js
We will retrieve the values that are entered by user in input box and check if the email entered by user is valid or already exists in our database.

We will use AJAX request to validate the email as soon as user enters the email by binding a change event on email input box. If the email and name of the user are valid we will add it to our database using another AJAX request.



const validateEmail = function(email) {
    var formData = new FormData();
    formData.append('email', email)
    $.ajaxSetup({
        headers: {
            "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
        }
    });
    $.ajax({
        url: '/validate/',
        type: 'POST',
        dataType: 'json',
        cache: false,
        processData: false,
        contentType: false,
        data: formData,
        error: function (xhr) {
            console.error(xhr.statusText);
        },
        success: function (res) {
            $('.error').text(res.msg);
        }
    });
};

const subscribeUser = function(email, name) {
    var formData = new FormData();
    formData.append('email', email);
    formData.append('name', name);
    $.ajaxSetup({
        headers: {
            "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
        }
    });
    $.ajax({
        url: '/newsletter/',
        type: 'POST',
        dataType: 'json',
        cache: false,
        processData: false,
        contentType: false,
        data: formData,
        error: function (xhr) {
            console.error(xhr.statusText);
        },
        success: function (res) {
            $('.success').text(res.msg);
            $('#userEmail').val(' ');
            $('#userName').val(' ');
        }
    });
};

(function ($) {
    $('#submit').on('click', () => {
        event.preventDefault();
        const userEmail = $('#userEmail').val();
        const userName = $('#userName').val();
        if (userEmail && userName) {
            subscribeUser(userEmail, userName);
        }
    });

    $('#userEmail').on('change', (event) => {
        event.preventDefault();
        const email = event.target.value;
        validateEmail(email);
    });
})(jQuery);

With this we are done with the front end. Now let's build a model and a server to try this code.

Setting up server

urls.py

The url where the request will be made



from django.urls import path
from . import views

urlpatterns = [
    path('newsletter/', views.index, name='index'),
    path('validate/', views.validate_email, name='validate_email'),
]

views.py

The request made to the server are handled by function defined in views.py. When we get a POST request, we retrieve the data and add them to the database.

validate_email: to validate the email entered by user
index: to add user to database

We will also send a confirmation mail to the user using Google's SMTP server. If you want to know how it works, you can check this article.



from django.shortcuts import render
from django.http import JsonResponse
import re
from .models import SubscribedUsers
from django.core.mail import send_mail
from django.conf import settings

def index(request):
    if request.method == 'POST':
        post_data = request.POST.copy()
        email = post_data.get("email", None)
        name = post_data.get("name", None)
        subscribedUsers = SubscribedUsers()
        subscribedUsers.email = email
        subscribedUsers.name = name
        subscribedUsers.save()
        # send a confirmation mail
        subject = 'NewsLetter Subscription'
        message = 'Hello ' + name + ', Thanks for subscribing us. You will get notification of latest articles posted on our website. Please do not reply on this email.'
        email_from = settings.EMAIL_HOST_USER
        recipient_list = [email, ]
        send_mail(subject, message, email_from, recipient_list)
        res = JsonResponse({'msg': 'Thanks. Subscribed Successfully!'})
        return res
    return render(request, 'index.html')

def validate_email(request): 
    email = request.POST.get("email", None)   
    if email is None:
        res = JsonResponse({'msg': 'Email is required.'})
    elif SubscribedUsers.objects.get(email = email):
        res = JsonResponse({'msg': 'Email Address already exists'})
    elif not re.match(r"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", email):
        res = JsonResponse({'msg': 'Invalid Email Address'})
    else:
        res = JsonResponse({'msg': ''})
    return res

models.py

We cannot store data until we have a model. Let's create one.



from django.db import models

class SubscribedUsers(models.Model):
    email = models.CharField(unique=True, max_length=50)
    name = models.CharField(max_length=50)

Run these commands in the terminal to migrate your model



python manage.py makemigrations
python manage.py  migrate

Now we are all set to test our application. Go to your browser, run the serving URL and test your app.

This are few snapshots of the output.

With this we have build a way for users to subscribe to our website. All the users who fill these detail and hit the subscribe button will be added into our database. The next step for will be sending a mail to all the users that we have in our database for any article we want. That's it for this article. Thanks for reading.

You can also connect with me on Twitter for any discussion.

Adios!

How to send email using SMTP server in django?

Shubham Singh Kshatriya — Mon, 12 Jul 2021 17:06:38 +0000

Remember when you we signed-up to an application and received a welcome email or you once forgot your password and got an email with password reset link. This small things adds weight to User Experience.

In this article, we will see how to send emails to our users using Django framework and SMTP server. Without wasting any minute let’s jump to the interesting part.

Setting up Gmail for django mail API:

In order to use Google SMTP, you should have a gmail account. Next thing you need is to enable Allow less secure app feature under account security settings. This feature is used for securing your google account from the apps that are less secure to use it in order to prevent hackers from muddle into your account.

Configuring settings.py:

In your settings.py file, add the following configurations.

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = 'your gmail account'
EMAIL_HOST_PASSWORD = 'your account’s password'
EMAIL_USE_SSL = False

Let’s understand these terminologies:

EMAIL_BACKEND:
This setting specifies the backend that we will use for sending an email in Django.

EMAIL_HOST:
This setting is to specify the email service provider.

EMAIL_USE_TLS:
This setting specifies whether the Email uses a TLS connection or not. It is True for Gmail.

EMAIL_PORT:
This is the default setting for Gmail. It is the port used by the SMTP server.

EMAIL_HOST_USER:
The name of the email account which will be used.

EMAIL_HOST_PASSWORD:
The password of the email account which will be used.

EMAIL_USE_SSL: False for Gmail.

Note: Your password is visible here so before deploying it encrypt your password or place in a file or server, where only have access.

Configuring views.py:

Django provides a module named send_mail, that we will use to send email to the users. There are many options available for the send_mail but for simplicity we will use only 4 fields.

subject:
It contains the subject of the email

message:
It contains the body of the email

email_from:
It is the sender’s mail address.

recipient_list:
It is the receiver’s email address.

from django.core.mail import send_mail
from django.conf import settings

def mail(request):
    ...
    subject = 'your subject'
    message = 'your message'
    email_from = settings.EMAIL_HOST_USER
    recipient_list = ['receiver's mail address', ]
    return render(request,'some_page.html')

Configuring urls.py:

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

With this your code is ready for sending the email to the users. All you need now is to run the server and check whether your methods are functioning properly.

That’s was it for this article. Thanks for reading.

You can connect with me on Twitter for any discussions.

Adios.

Extending AJAX file Uploader with Drag & Drop functionality

Shubham Singh Kshatriya — Fri, 02 Jul 2021 18:30:28 +0000

Hello,

In the previous article we saw how we can upload any file chunk by chunk to a Django server using AJAX. That's pretty much good but still most of the sites allows user to drag and drop their files directly on the page and do consequent actions along with an option to browse the file.

Personally I like the drag and drop feature. It provides better user experience as well. In this article, we will see how we can also add this amazing feature to our existing uploader. Without wasting any time, let's start with the code.

Here is the code of file uploader that we created in the last article. You can directly continue from here itself or if you are interested in exploring some basics of AJAX and DJANGO, then you can visit here.

We are going to add some more code into our existing one so as to implement the drag and drop functionality.

upload.html

The most basic thing for D&D is a drop zone where users can release the files. For the drop zone we will create a div and add some css for it.

This is our updated template file.

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        crossorigin="anonymous">
    <title>AJAX + DJANGO File Uploader</title>
    <link rel="stylesheet" href="{% static 'css/app.css' %}">
</head>
<body>
    <div class="col-lg-6 col-md-6" style="margin: 100px auto; display: block;">
        // drop zone
        <div class="drop-box" id="dropBox" style="width: 100%; height: 400px; border: 4px dashed gray;" >
            <p style="text-align: center; vertical-align: middle; line-height: 400px; font-size: 24px; color: gray;">Drag & Drop to Upload File</p>
        </div>
        <form enctype="multipart/form-data" method="POST" action="" style="text-align: center;">
            <p style="color: gray; padding-top: 20px;">or</p>
            {% csrf_token %}
            <div class="form-group">
                <label>Select file to upload.</label>
                <input type="file" class="form-control" id="fileupload" placeholder="Select file">
            </div>
            <input type="submit" value="Upload" id="submit" class="btn btn-success">     
        </form>
        <div id="uploaded_files"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

This is how the UI will appear now.

Now the user has a spot where he can drop his/her file. The questions arising in your mind could be like, How will our code know that user has entered into drop-zone? How will our code know that user has dropped the file in the drop-zone.For that exact purpose, JavaScript/ jQuery introduced events. An event is something that waits for a particular action to occur, like the click event of the button.

All we need to do is bind some events to our drop-zone that will continuously listen to the user actions. The events we need are are:

dragenter : This event will be fired when user enters into the drop-zone
dragover : This event will be fired when user moves over the drop-zone
drop : This event will be fired when user drops a file into the drop-zone

With these there are plenty more events but that's all we need at the moment.

app.js

...
ondragenter = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
};

ondragover = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
};

ondrop = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    const files = evt.originalEvent.dataTransfer;
    var uploader = new FileUpload(files);
    uploader.upload();
};

$('#dropBox')
    .on('dragover', ondragover)
    .on('dragenter', ondragenter)
    .on('drop', ondrop);

As you can see, we have created three functions namely ondragenter , ondragover and ondrop. Also we have bind them with events. We need to cancel the default behavior of browser and can achieve that using preventDefault() and stopPropagation().

When the user drops the file, it will be stored at "event.originalEvent.dataTransfer". We just need to retrieve from here. It will return an array of files.

The next thing would be to create an instance of the FileUpload class and call the upload method with the files object as a parameter. The existing code will upload the file to the server.

These are few snapshots of the output.

You can find the entire code here.

shubhamkshatriya25 / Django-AJAX-File-Uploader

A file uploader to upload large files in chunks to a server, built using Django and AJAX.

AJAX-File-Uploader

Here is the link of the blog for this project, incase you want a code walk through.

Install django in your local machine if not installed.

pip install django

Run the project.

python manage.py runserver

Below is the glimpse of the web app.

View on GitHub

Hope this could help you to learn something new today. Thank you for your precious time.

Adios!

AJAX file upload in chunks using Django, with a progress bar.

Shubham Singh Kshatriya — Fri, 25 Jun 2021 16:58:19 +0000

Hello!!!
There are lot of methods and technologies who allows to create a file uploader. Django also allows you to create a server where you can upload any type of file but the problem with that is Django will upload the file as a whole and reload the page after performing an upload which sometimes forces a user to do only singular tasks. This won't bother if the file size is small but things get tricky with the increasing file size.

The key point which makes a website flexible is allowing users to do multiple tasks simultaneously. Imagine you are uploading a video whose size is 1 GB and until the video is uploaded you can't do anything. How painful! The idea of uploading file as a whole turns out to be really bad when we are dealing with files whose size are in GB's. There is a concept of uploading files in chunks which can be very handy here. A chunk is an instance of file at a particular time. Uploading files in chunks requires breaking your file into smaller chunks and uploading each of them synchronously.

In this tutorial, we will see how can we upload a file in chunks to a Django server using AJAX request and response cycle. Without wasting any time, let's jump to the interesting part.

Setting up our project

( you can skip this part if you already have a project setup ready)

Creating a new Django project

django-admin startproject fileUploader
cd fileUploader

Running our project

python manage.py runserver

Creating a new app inside our project

python manage.py startapp uploader

Let's quickly configure our code to include uploader app into our project.

Create urls.py file in uploader
Configure project level urls.py file to include the urls of this file

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

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

Create three folders namely static, media and templates under fileUploader.
Create two folders namely css and js inside static folder.
Create a file named index.html inside templates folder
Create a file named app.css inside css folder
Create a file named app.js inside js folder
Configure project level settings.py file to include this changes

INSTALLED_APPS = [
    ...
    'uploader',
]

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        ...
    }
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

With this we are done with the setup. Let's move to the actual implementation.

Setting up UI

index.html

This is the HTML file which will contain the UI. I have kept this really simple, you can style the way you like. As you may have noticed, we will use bootstrap 4 components and some custom CSS. PS: Make sure to include csrf_token in the form :)

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        crossorigin="anonymous">
    <title>AJAX + DJANGO File Uploader</title>
    <link rel="stylesheet" href="{% static 'css/app.css' %}">
</head>
<body>
    <div class="col-lg-6 col-md-6" style="margin: 0 auto; display: block; margin-top: 100px;">
        <form enctype="multipart/form-data" method="POST" action="">
            {% csrf_token %}
            <div class="form-group">
                <label>Select file to upload.</label>
                <input type="file" class="form-control" id="fileupload" placeholder="Select file">
            </div>
            <input type="submit" value="Upload" id="submit" class="btn btn-success">     
        </form>
        <div id="uploaded_files"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

app.css

Let's add some of our own CSS to make our UI more aligned. We are also adding styles for the progress bar which will appear dynamically while uploading the file.

#myProgress {
    width: 100%;
}
#uploaded_files {
    margin-top: 25px;
    display: flex;
}
label {
    font-weight: bold;
}
.file-icon i {
    font-size: 60px;
    color: rgb(0, 0, 0);
}
.file-details {
    margin-top: -2px;
    padding-left: 10px;
    width: 100%;
}
.file-details p {
    margin-bottom: -7px;
}
small {
    margin-top: 0;
    color: black;
}

This is how our UI will appear

app.js

So, this is the heart of our code. I have used a objected oriented approach over here, the functional approach would work fine as well with little changes.

There is an attribute called max_length which indicates the maximum size of the chunk that can be uploaded at a time. There is a method upload() which we will be called when the click event of button is fired.

class FileUpload {
    constructor(input) {
        this.input = input
        this.max_length = 1024 * 1024 * 10; // 10 mb
    }

    upload() {
        this.create_progress_bar();
        this.initFileUpload();
    }

initFileUpload() {
    this.file = this.input.files[0];
    this.upload_file(0, null);
}

(function ($) {
    $('#submit').on('click', (event) => {
        event.preventDefault();
        var uploader = new FileUpload(document.querySelector('#fileupload'))
        uploader.upload();
    });
})(jQuery);

initFileUpload() method

Following is the list of variables which are used:

existingPath - null if file can be uploaded as a whole or contains the path at which the previous chunk was uploaded
nextChunk - next part of file if exists
currentChunk - current part of file
uploadedChunk - aggregation of all chunks uploaded so far
formData - An object to hold the data that will be sent to server.
end - whether an upload is ended or not.

First we create an instance of FormData and append all the values into it that we want to send to the server. Then we create an instance of AJAX using $.ajax() which comes with lot of properties. Here we have used

xhr() - to compute the amount of file that has been uploaded
error() - called when error occurs while doing some action
success() - called when action is successfully completed
url - the url at which the request will be made
type - request method
dataType - the type in which we pass the data
data - actual data that will be passed

upload_file(start, path) {
        var end;
        var self = this;
        var existingPath = path;
        var formData = new FormData();
        var nextChunk = start + this.max_length + 1;
        var currentChunk = this.file.slice(start, nextChunk);
        var uploadedChunk = start + currentChunk.size
        if (uploadedChunk >= this.file.size) {
            end = 1;
        } else {
            end = 0;
        }
        formData.append('file', currentChunk);
        formData.append('filename', this.file.name);
        formData.append('end', end);
        formData.append('existingPath', existingPath);
        formData.append('nextSlice', nextChunk);
        $('.filename').text(this.file.name)
        $('.textbox').text("Uploading file")
        $.ajaxSetup({
        // make sure to send the header
            headers: {
                "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        });
        $.ajax({
            xhr: function () {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        if (self.file.size < self.max_length) {
                            var percent = Math.round((e.loaded / e.total) * 100);
                        } else {
                            var percent = Math.round((uploadedChunk / self.file.size) * 100);
                        }
                        $('.progress-bar').css('width', percent + '%')
                        $('.progress-bar').text(percent + '%')
                    }
                });
                return xhr;
            },

            url: '/fileUploader/',
            type: 'POST',
            dataType: 'json',
            cache: false,
            processData: false,
            contentType: false,
            data: formData,
            error: function (xhr) {
                alert(xhr.statusText);
            },
            success: function (res) {
                if (nextChunk < self.file.size) {
                    // upload file in chunks
                    existingPath = res.existingPath
                    self.upload_file(nextChunk, existingPath);
                } else {
                    // upload complete
                    $('.textbox').text(res.data);
                    alert(res.data)
                }
            }
        });
    };

create_progress_bar() method

Here we create a bootstrap progress bar which will be shown while uploading a file. It's always good that user can visualize how much progress has been made.

create_progress_bar() {
        var progress = `<div class="file-icon">
                            <i class="fa fa-file-o" aria-hidden="true"></i>
                        </div>
                        <div class="file-details">
                            <p class="filename"></p>
                            <small class="textbox"></small>
                            <div class="progress" style="margin-top: 5px;">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                </div>
                            </div>
                        </div>`
        document.getElementById('uploaded_files').innerHTML = progress
    }

With this we are done with the front end. Now let's build a model and a server to try this code.

Setting up server (uploader)

urls.py

The url where the request will be made

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

views.py

The request made to the server are handled by function defined in views.py. When we get a POST request, we retrieve the data and create a new file or append to an existing file inside the media folder and send the path to which the file was stored as a response. Notice that we are storing file in binary mode.

from django.shortcuts import render
from django.http import JsonResponse
import os
from .models import File

def index(request):
    if request.method == 'POST':  
        file = request.FILES['file'].read()
        fileName= request.POST['filename']
        existingPath = request.POST['existingPath']
        end = request.POST['end']
        nextSlice = request.POST['nextSlice']

        if file=="" or fileName=="" or existingPath=="" or end=="" or nextSlice=="":
            res = JsonResponse({'data':'Invalid Request'})
            return res
        else:
            if existingPath == 'null':
                path = 'media/' + fileName
                with open(path, 'wb+') as destination: 
                    destination.write(file)
                FileFolder = File()
                FileFolder.existingPath = fileName
                FileFolder.eof = end
                FileFolder.name = fileName
                FileFolder.save()
                if int(end):
                    res = JsonResponse({'data':'Uploaded Successfully','existingPath': fileName})
                else:
                    res = JsonResponse({'existingPath': fileName})
                return res

            else:
                path = 'media/' + existingPath
                model_id = File.objects.get(existingPath=existingPath)
                if model_id.name == fileName:
                    if not model_id.eof:
                        with open(path, 'ab+') as destination: 
                            destination.write(file)
                        if int(end):
                            model_id.eof = int(end)
                            model_id.save()
                            res = JsonResponse({'data':'Uploaded Successfully','existingPath':model_id.existingPath})
                        else:
                            res = JsonResponse({'existingPath':model_id.existingPath})    
                        return res
                    else:
                        res = JsonResponse({'data':'EOF found. Invalid request'})
                        return res
                else:
                    res = JsonResponse({'data':'No such file exists in the existingPath'})
                    return res
    return render(request, 'index.html')

models.py

We cannot store data until we have a model. So here is how we can make one for this uploader

class File(models.Model):
    existingPath = models.CharField(unique=True, max_length=100)
    name = models.CharField(max_length=50)
    eof = models.BooleanField()

Run these commands in the terminal to migrate your model

python manage.py makemigrations
python manage.py  migrate

Now we are all set to test our application. Go to your browser and run the serving URL, select a file and click on upload. You can see the beautiful thing that you just built. I guess the progress bar filled very quickly right, so this time try a larger file ( any size you may want, it won't collapse) and see how the file gets uploaded in chunks.

This are few snapshots of the output.

Here is the GitHub repository link for this code.

shubhamkshatriya25 / Django-AJAX-File-Uploader

A file uploader to upload large files in chunks to a server, built using Django and AJAX.

AJAX-File-Uploader

Here is the link of the blog for this project, incase you want a code walk through.

Install django in your local machine if not installed.

pip install django

Run the project.

python manage.py runserver

Below is the glimpse of the web app.

View on GitHub

Hope this could help you to learn something new today. You can also connect with me on Twitter. Thank you for your precious time.

Adios!

Working with AJAX request and Django

Shubham Singh Kshatriya — Sun, 27 Dec 2020 18:03:32 +0000

Hey there! There are a lot of scenarios where we want to use AJAX requests in web applications. It helps web applications to be much faster and dynamic. In this post, we will explore how we can handle AJAX requests in Django and we will be using function-based views and jQuery for simplicity. Without wasting any time, let's jump to the interesting part.

Initial set-up

Here is my base.html file. The jQuery library is added at the end of this page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
    {% block content %}
    {% endblock %}
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

Sample

For this tutorial, let's assume we want to validate the username field as soon as the user enters his username. We will do a simple check to see whether the username exists or not.

urls.py

from django.urls import path
from . import views

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

views.py

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request,'register.html')

register.html

{% extends 'base.html' %}

{% block content %}
<div class="col-lg-4">
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" class="form-control mb-3" id="username" placeholder="Username">
    <input type="password" class="form-control mb-3" placeholder="Password">
    <input type="password" class="form-control mb-3" placeholder="Repeat Password">
    <input type="button" value="Submit" class="btn btn-primary">
</form>
</div>
{% endblock %}

And this is how the view looks.

AJAX Request

Let's implement an AJAX request to check whether the username is already taken or not. We need the id of the username field and we will add a listener on its change event.

app.js

Here the change event occurs every time the value of the username field changes. Make sure the event is getting fired correctly and you got the listener right. The AJAX request uses the POST method here (you can use any according to your need).

$("#username").change(function () {
        var username = $(this).val();
        $.ajaxSetup({
            headers: {
                "X-CSRFToken": document.querySelector('[name=csrfmiddlewaretoken]').value,
            }
        });
        $.ajax({
        url: 'validate',
        method: 'POST',
        data: {
          'username': username
        },
        dataType: 'json',
        success: function (data) {
          if (data.taken) {
            alert("Username taken");
          }
        }
      });
    });

views.py

from django.contrib.auth.models import User

def validate(request):
    username = request.POST['username']
    data = {
        'taken' : User.objects.filter(username__iexact=username).exists()
    }
    return JsonResponse(data)

Add a route for this view.

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('',views.index,name="index"),
    path('validate',views.validate,name="validate"),
]

And here's the output.

That was it. Now, you have learned to handle AJAX requests in Django. You can also do this using plain JavaScript, just the app.js would be slightly different. Thank you for your precious time.

Adios!

What is WEB SCRAPING?

Shubham Singh Kshatriya — Thu, 17 Dec 2020 11:16:29 +0000

The Internet is very Gigantic. There are uncountable websites over the Internet and it contains enormous amount of invaluable data. Stock prices, Product details, Stats, Company contacts,etc whatever you name it. If you ever wanted to retrieve these information, you may have done some copy-paste manually or followed the website format. This is where Web Scraping steps in.

What is Web Scraping?

Web Scraping, also referred as Web Data Extraction,Web Harvesting, is a process of “scraping” or retrieving data from a website. Unlike the manual process, Web Scraping uses automation tools to retrieve huge amount of data within a fraction of time. Though Scraping can be done manually but in most cases, automation tool is always preferred because of less efforts and faster results.

Web scraping software may access the World Wide Web directly using the HTTP, or through a web browser. It extracts the data from a particular website and outputs them to CSV, Excel Spreadsheet or more.

Why do we need Web Scraping?

With the overwhelming data available on the internet, web scraping has become the essential approach to aggregating Big Data sets. The application of Web Scraping is increasing drastically day by day. Let me list few of its application: Price Monitoring, Market Research, Real Estate, Content Monitoring and way more…

The statistics below are based on the information collected from LinkedIn. The top 10 industries that have the highest demand for web scraping skills are: Computer Software (22%); Information Technology and Services (21%); Financial Services (12%); Internet (11%); Marketing and Advertising (5%); Computer & Network Security (3%); Insurance (2%); Banking (2%); Management Consulting (2%); Online Media(2%).

When you post a link or image on Facebook/ Instagram or any other social platform, the information around it is scraped. Internet without web scraping would be absolutely dead, it would never have become the huge place it is now. See, that’s how this trend is getting over every technical aspects that you may know or don’t have any idea of. So, what could stop anyone to get into this amazing trend?

How to get started with Web Scraping?

There are plenty of Automation tools better known as Web Scraper which does the task of scraping any website. And for the question, which one to use, I would say it depends. There are plenty of Python libraries like Beautiful Soup, Selenium, LXML, etc which helps to develop one’s very own Scraper or you may use some existing tools like Scrapy, Octoparse, ParseHub and many more for the same. Choice is yours whether you want to learn Web Scraping and develop our own code and get along with this art or make use of existing tools and serve your purpose.

Is Web Scraping Legal?

Coming to the most important question, Web scraping is the automated gathering of data from someone else’s website. Although scraping is ubiquitous, it’s not legal. A variety of laws may apply to unauthorized scraping, including contract, copyright and trespass to chattels laws. Most of the websites state whether you can Scrap them or not in their Terms of Services(ToS). You can find whether you are allowed to scrap a website or not by going through their Terms of Services.

Web scraping of public pages might be legal(Don’t try to scrap any of them unless you are allowed to do so). Web scraping by intruding into private pages, without obtaining their prior written permission, or in disregard of their Terms of Service is totally illegal.

While it might sound intimidating, web scraping is way easier than you think. It will take very little effort and you can master this art quite easily.

Happy Scraping!

Source: Wikipedia, Google.

DEV Community: Shubham Singh Kshatriya

How to fetch current location of user in Flutter?

Introduction:

Setup

Android

iOS

Implementation

fetchLocation()

getAddress()

How to add Google Maps plugin in Flutter?

Introduction

Table of contents

Creating a GCP project

Adding Google Maps SDK

Creating an API key

Setting up Flutter application

Android setup

iOS setup

Adding Google Maps Widget.

JS Array methods: Which method to use to...?

1. Mutate the original array

Add an element

Remove an element

Others:

2. Create a new array from original array

Portion of array

Computed from array.

Merge into array

Flatten the array:

3. Find the

Index of element

Array element

4. Check if array contains an element

Using a condition

Using a value

5. Loop the array

6. Join the array elements

How to build a Email Newsletter Subscriber in Django?

Setting up UI

Setting up server

How to send email using SMTP server in django?

Setting up Gmail for django mail API:

Configuring settings.py:

Configuring views.py:

Configuring urls.py:

Extending AJAX file Uploader with Drag & Drop functionality

upload.html

app.js

shubhamkshatriya25 / Django-AJAX-File-Uploader

A file uploader to upload large files in chunks to a server, built using Django and AJAX.

AJAX-File-Uploader

Install django in your local machine if not installed.

Run the project.

Below is the glimpse of the web app.

AJAX file upload in chunks using Django, with a progress bar.

Setting up our project

Creating a new Django project

Running our project

Creating a new app inside our project

Setting up UI

index.html

app.css

app.js

initFileUpload() method

create_progress_bar() method

Setting up server (uploader)

urls.py

views.py

models.py

shubhamkshatriya25 / Django-AJAX-File-Uploader

A file uploader to upload large files in chunks to a server, built using Django and AJAX.

AJAX-File-Uploader

Install django in your local machine if not installed.

Run the project.

Below is the glimpse of the web app.

Working with AJAX request and Django

Initial set-up

Sample

urls.py

views.py