zahra-ove/UploadController.php

## form.blade.php
<!doctype html>
<html lang="en">Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>
    <title>Document</title>
</head>
<body>

    <form method="
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-POST" action="javascript:void(0)" enctype="multipart/form-data" id="formupload">
        <input type="file" name="pic1[]" id="pic1" multiple />
        <input type="submit" id="subBtn" />
    </form>
    <script src="{{asset('/js/multipleUpload.js')}}"></script>
</body>
</html>

## multipleupload.js
$(document).ready(function(){

    $("#formupload").submit(function(e) {

        e.preventDefault();

        //get number of uploaded files
        let num = $("#pic1")[0].files.length;
        let allFiles = $("#pic1")[0].files;
        console.log(allFiles);
        console.log(num);

        let formdata = new FormData(this);
        console.log(formdata);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type:'POST',
            data: formdata,
            url: "/multipleUpload",
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                this.reset();
                console.log('Files has been uploaded using jQuery ajax');
                console.log(data);
            },
            error: function(data){
                console.log(data.responseJSON.errors);
                console.log(data);
            }
        });

    });

});

## UploadController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class UploadController extends Controller
{
    public function showForm()
    {
        return view('fileUpload.uploadForm');
    }


    public function multipleUpload(Request $request)
    {
        $data = $request->file('pic1');

        foreach($data as $datum){
            $num--;
            $fileName = $datum->getClientOriginalName();
            Storage::disk('public')->putFileAs('/uploads', $datum, $fileName);
        }

        $result = [
            'status' => 'success',
        ];
        return $result;
    }
}
	<!doctype html>
	<html lang="en">Compatible" content="ie=edge">
	<meta name="csrf-token" content="{{csrf_token()}}">
	<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>
	<title>Document</title>
	</head>
	<body>

	<form method="
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-POST" action="javascript:void(0)" enctype="multipart/form-data" id="formupload">
	<input type="file" name="pic1[]" id="pic1" multiple />
	<input type="submit" id="subBtn" />
	</form>
	<script src="{{asset('/js/multipleUpload.js')}}"></script>
	</body>
	</html>
	$(document).ready(function(){

	$("#formupload").submit(function(e) {

	e.preventDefault();

	//get number of uploaded files
	let num = $("#pic1")[0].files.length;
	let allFiles = $("#pic1")[0].files;
	console.log(allFiles);
	console.log(num);

	let formdata = new FormData(this);
	console.log(formdata);

	$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
	});
	$.ajax({
	type:'POST',
	data: formdata,
	url: "/multipleUpload",
	cache:false,
	contentType: false,
	processData: false,
	success: (data) => {
	this.reset();
	console.log('Files has been uploaded using jQuery ajax');
	console.log(data);
	},
	error: function(data){
	console.log(data.responseJSON.errors);
	console.log(data);
	}
	});

	});

	});
	<?php

	namespace App\Http\Controllers;

	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Storage;

	class UploadController extends Controller
	{
	public function showForm()
	{
	return view('fileUpload.uploadForm');
	}


	public function multipleUpload(Request $request)
	{
	$data = $request->file('pic1');

	foreach($data as $datum){
	$num--;
	$fileName = $datum->getClientOriginalName();
	Storage::disk('public')->putFileAs('/uploads', $datum, $fileName);
	}

	$result = [
	'status' => 'success',
	];
	return $result;
	}
	}