How to upload files using Axios in ReactJS + Laravel.

UpdatedFebruary 16, 2023

Software Engineer with over 8 years of experience and specialized in PHP, Laravel Framework, ReactJS, TailwindCSS, MySQL, and PostgreSQL.

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Ultimate Guide to Setting Up a Web Development Environment on Linux Ubuntu 24 LTS

Last week, I encountered issues with my existing Ubuntu setup. It was slow and lagging, and I couldn't resolve the problem. Then, I remembered that my laptop had two operating systems installed: Windows and Linux on separate partitions. Suspecting a ...

Jul 22, 20246 min read2.4K

How to use Computed Property Names in console.log?

Introduction If you want to learn about how to use console.log as a professional developer then you have to learn computer property names. Let's Start Assume that we have 4 different objects and each one is assigned to a variable. How can we log thos...

May 1, 20242 min read45

How to use Computed Property Names in console.log?

How to use Query Scopes in Laravel efficiently?

Hello artisans, Today I'll be writing about how to use Query Scopes efficiently in Laravel projects. Query Scopes are very useful to encapsulate the logic you want to apply to database queries while using Models. Let's start with an example and under...

Apr 29, 20242 min read61

How to use Query Scopes in Laravel efficiently?

Laravel Sanctum Way To Authenticates different Models rather than Users.

Laravel Sanctum is one way to authenticate different models to use your application but there are many other ways. In this article, I'll be explain how to authenticate team/team members with a Laravel Sanctum. Assume that we have following Model; cla...

Dec 10, 20231 min read1.1K

Mastering Form Management with React useForm Plugin Library

Introduction: Managing forms in web applications can be a complex task, especially when dealing with validation rules, error handling, and form submissions. The React useForm plugin library offers a powerful and elegant solution to simplify form mana...

May 2, 20236 min read294

Mastering Form Management with React useForm Plugin Library

Building Portfolio Apps

15 posts

import React, {useState} from 'react'; import axios from 'axios'; const Form = () => { // state to store the selected file. const [selectedFile, setSelectedFile] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); // Create a FormData object const formData = new FormData(); // Append file to the formData object here formData.append("selectedFile", selectedFile); try { // We will send formData object as a data to the API URL here. const response = await axios.post("/api/upload/file", formData, { headers: {"Content-Type": "multipart/form-data"} }).then((res) => { alert("File Uploaded Successfully"); }).catch((error) => { alert("Error") }); } catch (error) { console.log(error) } } const handleFileSelect = (event) => { // we only get the selected file from input element's event setSelectedFile(event.target.files[0]) } return ( <form onSubmit={handleSubmit}> <input type="file" onChange={handleFileSelect}/> <input type="submit" value="Upload File"/> </form> ) }; export default Form;

if ($request->file('selectedFile')) { $uploadedFile = $request->file('selectedFile'); if ($uploadedFile) { $filename = Str::uuid() . '.' . $uploadedFile->getClientOriginalExtension(); Storage::disk('public')->putFileAs('uploadedFiles/', $uploadedFile, $filename); } }

Command Palette

Comments

More from this blog