Creating a File Upload Component with React and Nodejs

Upload page reloads on submitting a file for upload. Are you a newbie to React, and using this generic style to upload files on the web?

There’s a better way to handle uploads in React.

This tutorial is the answer!

Today, it’ll change forever if you go through this tutorial and implement it on your site.

We’ll use Node with React to upload multiple files at once. As we go along, there will be simple client-side validation and finally with uploaded notification can be shown with react-toastify.

Like always, start a react app with create-react-app

Include the bootstrap CDN in index.html.

In contrast to creating the form from scratch, grab this snippet from bootsnipp.

This is our beautiful upload form to work with.

Single  React file upload

Let’s start with a simple one, a single file upload.

Capture selected file

Add a change handler in toapp.js pick the file on change.

 <input type="file" name="file" onChange={this.onChangeHandler}/>

Log event.target.files , it is an array of all stored files.  target.files[0]holds the actual file and its details.

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

On saving, create-react-app will instantly refresh the browser.

Store the file in state, and only upload when a user clicks the upload button.

Initially, the selectedFilestate is set to null

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }

  }

To pass the file to the state, setselectedFile state to event.target.files[0].

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

Check the state variable again with react-devtools to verify.

Again, create-react-app will instantly refresh the browser and you’ll see the result

Send the files to the server

We have a state of files to upload.

We definitely need an upload button,  upload is handled with onClick event handler.

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button> 

onClickhandle  will execute onClickHandler which sends a request to the server. The file from a state is appended as a file to FormData.

onClickHandler = () => {
    const data = new FormData() 
    data.append('file', this.state.selectedFile)
}

We’ll use axios to send AJAX requests.

Install and import axios.

import axios from 'axios';

Create form object and create POST request with axios. It needs endpoint URL and form data.

   axios.post("http://localhost:8000/upload", data, { // receive two parameter endpoint url ,form data 
      })
      .then(res => { // then print response status
        console.log(res.statusText)
      })

Here’s final,onClickhandler with axios POST request. It sends POST request to [http://localhost:8000/upload](http://localhost:8000/upload) and gets response.

onClickHandler = () => {
   const data = new FormData()
   data.append('file', this.state.selectedFile)
   axios.post("http://localhost:8000/upload", data, { 
      // receive two    parameter endpoint url ,form data
  })

.then(res => { // then print response status
    console.log(res.statusText)
 })
}

The file type attached is set as a state and needs to be checked. As a result, it’s a binary file.

Axios will send a request to the endpoint with a binary file in Form Data.

To receive the uploaded file, implement a backend server. It’ll receive the file sent from front-end.

Create a simple server with Node.

Create server.js file in the root directory

Install express, multer, and cors.

npm i express multer cors nodemon –save

We’ll use express to create a server, multer to handle files. Cors will be used to enable cross-origin request to this server. Nodemon to monitor the changes and auto-reload, it is optional and you’ll have to restart the server manually in it’s absence.

In,server.js initiate an express instance

var express = require('express');
var app = express();
var multer = require('multer')
var cors = require('cors');

Don’t forget CORS middleware.

app.use(cors())

Create a multer instance and set the destination folder. The code below uses /public folder. You can also assign a new file name upon upload. The code below uses ‘originalfilename’as the file name.

var storage = multer.diskStorage({
      destination: function (req, file, cb) {
      cb(null, 'public')
    },
    filename: function (req, file, cb) {
      cb(null, Date.now() + '-' +file.originalname )
    }
})

Create an upload instance and receive a single file

var upload = multer({ storage: storage }).single('file')

Setup thePOSTroute to upload a file

app.post('/upload',function(req, res) {

    upload(req, res, function (err) {
           if (err instanceof multer.MulterError) {
               return res.status(500).json(err)
           } else if (err) {
               return res.status(500).json(err)
           }
      return res.status(200).send(req.file)

    })

});

Start an upload object and handle an error, check formultererror before general errors. Status OK (200) with metadata is sent back to the client on successful upload.

Make the server listen on port 8000.

app.listen(8000, function() {

    console.log('App running on port 8000');

});

Run nodemon server.js in a terminal to start this server

Upload a file, you will see the file appear in the public directory.

It’s working, congratulations!

Uploading multiple files in React

It’s time for uploading multiple files at once.

Addmultiplein the input field to accept multiple files in the form.

<input type="file" class="form-control" multiple onChange={this.onChangeHandler}/>

Update andonChangeHandler remove zero indexes, it’s just event.target.files.

onChangeHandler=event=>{
    this.setState({
     selectedFile: event.target.files,
    })
}

Also, update functiononClickHandler to loop through the attached files.

onClickHandler = () => {
   const data = new FormData()
   for(var x = 0; x<this.state.selectedFile.length; x++) {
       data.append('file', this.state.selectedFile[x])
   }

  axios.post("http://localhost:8000/upload", data, { 
      // receive two    parameter endpoint url ,form data
  })

.then(res => { // then print response status
    console.log(res.statusText)
 })

}

In server.js update multer upload instance to accept an array of files.

var upload = multer({ storage: storage }).array('file')

Reload the server and upload multiple files this time.

Is it working for you as well? Let us know if it isn’t.

Handling Validation

Until now, nothing has gone wrong but  it doesn’t mean it never will.

Here are situations where this application can crash:

1. Too many images to upload
2. Uploading an image with the wrong file extension
3. Sending an image file that is too large

Client-side validation doesn’t secure the application but can throw errors early to the user and improves the user experience.

#1 There are too many files!

Create a separate function named maxSelectedFile and pass event object.

Use length to check a number of files attached. The code below returns false when a number of files reach 3.

maxSelectFile=(event)=>{
   let files = event.target.files // create file object
       if (files.length > 3) { 
          const msg = 'Only 3 images can be uploaded at a time'
          event.target.value = null // discard selected file
          console.log(msg)
         return false;

     }
   return true;

}

Update onChangeHandler to only set state when the maxSelectFile returns, that is when a number of files are less than 3.

onChangeHandler=event=>{
      var files = event.target.files
      if(this.maxSelectFile(event)){ 
      // if return true allow to setState
         this.setState({
         selectedFile: files
      })
   }
}

The result

#2 Uploading an image with the wrong file extension

Create a checkMimeType function and pass an event object

checkMimeType=(event)=>{
  //getting file object
  let files = event.target.files 
  //define message container
  let err = ''
  // list allow mime type
 const types = ['image/png', 'image/jpeg', 'image/gif']
  // loop access array
  for(var x = 0; x<files.length; x++) {
   // compare file type find doesn't matach
       if (types.every(type => files[x].type !== type)) {
       // create error message and assign to container   
       err += files[x].type+' is not a supported format\n';
     }
   };

 if (err !== '') { // if message not same old that mean has error 
      event.target.value = null // discard selected file
      console.log(err)
       return false; 
  }
 return true;

}

Update onChangeHandler again to include checkMimeType.

onChangeHandler=event=>{
      var files = event.target.files
      if(this.maxSelectFile(event) && this.checkMimeType(event))){ 
      // if return true allow to setState
         this.setState({
         selectedFile: files
      })
   }
}

See the output again.

#3 Uploading an image that is too large

Create another function checkFileSize to check the file size. Define your limiting size and return false if the uploaded file size is greater.

checkFileSize=(event)=>{
     let files = event.target.files
     let size = 15000 
     let err = ""; 
     for(var x = 0; x<files.length; x++) {
     if (files[x].size > size) {
      err += files[x].type+'is too large, please pick a smaller file\n';
    }
  };
  if (err !== '') {
     event.target.value = null
     console.log(err)
     return false
}

return true;

}

Update onChangeHandler again to handle checkFileSize.

onChangeHandler=event=>{
      var files = event.target.files
      if(this.maxSelectFile(event) && this.checkMimeType(event) &&    this.checkMimeType(event)){ 
      // if return true allow to setState
         this.setState({
         selectedFile: files
      })
   }
}

The output thereafter…

That’s all on client-side validation.

Improve UX with progress bar and Toastify

Letting the user know the happening is a lot better than having them stare at the screen until the upload is finished.

To improve the user experience, we can insert progress bar and a popup message

Progress Bar

Use state variable loaded to update real-time values.
Update the state, add loaded: 0

constructor(props) {
   super(props);
     this.state = {
       selectedFile: null,
       loaded:0
   }
}

The loaded state is changed from progressEvent of the POST request.

axios.post("http://localhost:8000/upload", data, {
       onUploadProgress: ProgressEvent => {
         this.setState({
           loaded: (ProgressEvent.loaded / ProgressEvent.total*100),
       })
   },
})

For progress bar, we use reactstrap.

Install and import progress bar from reactstrap

import {Progress} from 'reactstrap';

Add a progress bar after the file picker.

<div class="form-group">

<Progress max="100" color="success" value={this.state.loaded} >{Math.round(this.state.loaded,2) }%</Progress>

</div>

See the result in action.

Beautiful, ain’t it?

Display the result message with toastify

Install react-toastify and import the following:

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Put the container somewhere

<div class="form-group">
   <ToastContainer />
</div>

Use toast wherever you want to display a message.

First of all, place upload result

.then(res => { 
    toast.success('upload success')
})
.catch(err => { 
    toast.error('upload fail')
})

See the result.

Also, place validation result.

Update checkMimeType function for validation.

checkMimeType=(event)=>{

    let files = event.target.files
    let err = [] // create empty array
    const types = ['image/png', 'image/jpeg', 'image/gif']
    for(var x = 0; x<files.length; x++) {
        if (types.every(type => files[x].type !== type)) {
        err[x] = files[x].type+' is not a supported format\n';
       // assign message to array
      }
    };
    for(var z = 0; z<err.length; z++) { // loop create toast massage
        event.target.value = null 
        toast.error(err[z])
    }
   return true;
}

You’ve the result

Also, add toast.warn(msg)

Include the checkFileSizeand changes from checkMimeType function

checkFileSize=(event)=>{
  let files = event.target.files
  let size = 2000000 
  let err = []; 
  for(var x = 0; x<files.length; x++) {
  if (files[x].size > size) {
   err[x] = files[x].type+'is too large, please pick a smaller file\n';
 }
};
for(var z = 0; z<err.length; z++) {
 toast.error(err[z])
 event.target.value = null
}
return true;
}

Change err variable to array and loop to create toast message from it.

Our react file upload is working fine, but we can have a lot of improvements like uploading to cloud providers , also use of third-party plugins for other services to improve upload experience are some possible additions.

Before we end of this tutorial,  you can contribute to improve and refactor code from this tutorial send your PR to this repository.

If you loved the tutorial, you might also want to check out Mosh’s Complete React course

#nodejs #javascript #react #reactjs

What is GEEK

Buddha Community

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

• Performance: It delivers optimal performance.
• Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
• UI design: React Native enables you to design simple and responsive UI for your mobile app.
• 3rd party plugins: This framework supports 3rd party plugins.
• Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

• Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
• Near-native user experience: React Native provides several native components, and these are platform agnostic.
• The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Multiple File Upload in Laravel 7, 6

in this post, i will show you easy steps for multiple file upload in laravel 7, 6.

As well as how to validate file type, size before uploading to database in laravel.

Laravel 7/6 Multiple File Upload

You can easily upload multiple file with validation in laravel application using the following steps:

1. Download Laravel Fresh New Setup
2. Setup Database Credentials
3. Generate Migration & Model For File
4. Make Route For File uploading
5. Create File Controller & Methods
6. Create Multiple File Blade View
7. Run Development Server

https://www.tutsmake.com/laravel-6-multiple-file-upload-with-validation-example/

#laravel multiple file upload validation #multiple file upload in laravel 7 #multiple file upload in laravel 6 #upload multiple files laravel 7 #upload multiple files in laravel 6 #upload multiple files php laravel

Top 8 React Upload Component for Your App

The React Upload is a component for uploading one or multiple files, images, documents, audio, video, and other files to a server. It is an extended version of the HTML5 upload component () with a rich set of features that includes multiple file selection, progress bars, auto-uploading, drag and drop, folder (directory) uploading, file validation, and more.

1. react-file-upload-mobile

React Mobile Single File Upload Component.

Download: https://github.com/chengsmart/react-file-upload-mobile/archive/master.zip

---

2. react-butterfiles

A small component for building file upload fields of any type, for example a simple file upload button or an image gallery field with drag and drop support and preview of selected images.

Demo: https://react-butterfiles.netlify.com/

Download: https://github.com/doitadrian/react-butterfiles/archive/master.zip

---

3. react-firebase-file-uploader

A file uploader for react that uploads images, videos and other files to your firebase storage.

Demo: https://npm.im/react-firebase-file-uploader

Download: https://github.com/fris-fruitig/react-firebase-file-uploader/archive/master.zip

---

4. react-avatar

Load, crop and preview avatar with ReactJS component.

Demo: https://kirill3333.github.io/react-avatar/

Download: https://github.com/kirill3333/react-avatar/archive/master.zip

---

5. Filestack React

This is the official React component for Filestack API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.

Demo: https://www.filestack.com/

Download: https://github.com/filestack/filestack-react/archive/master.zip

---

6. itsa-react-fileuploadbutton

React-component: file-uploader, but exposed as a simple button without input-area and with extended features

Download: https://github.com/ItsAsbreuk/itsa-react-fileuploadbutton/archive/master.zip

---

7. React Images Uploader

React.js component for uploading images to the server.

Download: https://github.com/aleksei0807/react-images-uploader/archive/master.zip

---

8. React Image Preview and Upload

A simple react component to handle uploading previewing an image before uploading it.

Demo & Source Code: https://codepen.io/hartzis/pen/VvNGZP

#React #React-upload #react-upload-component #reactjs

Laravel 7 File Upload Example

Here i will show you how to upload files in laravel 7, 6, 5 version. And simply upload file like pdf, image, xlx, zip etc in laravel app.

Laravel 7 file upload example

Checkout this laravel 7 file upload example:- https://www.tutsmake.com/laravel-6-file-upload-with-validation-tutorial/

#laravel file upload example #file upload in laravel 6 #file upload in laravel 7 #laravel file upload

Laravel 7 File Upload Via API Example From Scratch

Laravel 7 file/image upload via API using postman example tutorial. Here, you will learn how to upload files/images via API using postman in laravel app.

As well as you can upload images via API using postman in laravel apps and also you can upload images via api using ajax in laravel apps.

If you work with laravel apis and want to upload files or images using postman or ajax. And also want to validate files or images before uploading to server via API or ajax in laravel.

So this tutorial will guide you step by step on how to upload file vie API using postman and ajax in laravel with validation.

Laravel Image Upload Via API Using Postman Example

File

Follow the below given following steps and upload file vie apis using postman with validation in laravel apps:

• Step 1: Install Laravel New App
• Step 2: Add Database Credentials
• Step 3: Generate Migration & Model
• Step 4: Create Routes For File
• Step 5: Generate Controller by Artisan
• Step 6: Run Development Server
• Step 7: Laravel Upload File Via Api Using PostMan

Checkout Full Article here https://www.tutsmake.com/laravel-file-upload-via-api-example-from-scratch/

#uploading files via laravel api #laravel file upload api using postman #laravel image upload via api #upload image using laravel api #image upload api in laravel validation #laravel send file to api