Why is there an error while uploading a file via Dropzone js?

  • 0
    //Route form displaying our form
    Route::get('/dropzoneform', '[email protected]');
    //Rout for submitting the form datat
    Route::post('/storedata', '[email protected]')->name('form.data');
    //Route for submitting dropzone data
    Route::post('/storeimgae', '[email protected]');

    public function dropzoneform()
            $products = Product::all();
            return view('products.add_product_image', compact("products"));
        public function storeData(Request $request)
            try {
                $product = new ProductImage;
                $product->product_id = $request->product;
                $user_id = $product->id; // this give us the last inserted record id
            catch (\Exception $e) {
                return response()->json(['status'=>'exception', 'msg'=>$e->getMessage()]);
            return response()->json(['status'=>"success", 'user_id'=>$user_id]);
        // We are submitting are image along with userid and with the help of user id we are updateing our record
        public function storeImage(Request $request)
                $img = $request->file('file');
                //here we are geeting userid alogn with an image
                $userid = $request->userid;
                $imageName = strtotime(now()).rand(11111,99999).'.'.$img->getClientOriginalExtension();
                $user_image = new ProductImage();
                $original_name = $img->getClientOriginalName();
                $user_image->image = $imageName;
                if(!is_dir(public_path() . '/uploads/images/')){
                    mkdir(public_path() . '/uploads/images/', 0777, true);
            $request->file('file')->move(public_path() . '/uploads/images/', $imageName);
            // we are updating our image column with the help of user id
            $user_image->where('id', $userid)->update(['image'=>$imageName]);
            return response()->json(['status'=>"success",'imgdata'=>$original_name,'userid'=>$userid]);

    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        // Dropzone.options.demoform = false;   
        let token = $('meta[name="csrf-token"]').attr('content');
        $(function() {
        var myDropzone = new Dropzone("div#dropzoneDragArea", { 
            paramName: "file",
            url: "{{ url('/storeimgae') }}",
            previewsContainer: 'div.dropzone-previews',
            addRemoveLinks: true,
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 1,
            maxFiles: 1,
            params: {
                _token: token
             // The setting up of the dropzone
            init: function() {
                var myDropzone = this;
                //form submission code goes here
                $("form[name='demoform']").submit(function(event) {
                    //Make sure that the form isn't actully being sent.
                    URL = $("#demoform").attr('action');
                    formData = $('#demoform').serialize();
                        type: 'POST',
                        url: URL,
                        data: formData,
                        success: function(result){
                            if(result.status == "success"){
                                // fetch the useid 
                                var userid = result.user_id;
                                $("#userid").val(userid); // inseting userid into hidden input field
                                //process the queue
                //Gets triggered when we submit the image.
                this.on('sending', function(file, xhr, formData){
                //fetch the user id from hidden input field and send that userid with our image
                  let userid = document.getElementById('userid').value;
                   formData.append('userid', userid);
                this.on("success", function (file, response) {
                    //reset the form
                    //reset dropzone
                this.on("queuecomplete", function () {
                // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                // of the sending event because uploadMultiple is set to true.
                this.on("sendingmultiple", function() {
                  // Gets triggered when the form is actually being sent.
                  // Hide the success button or the complete form.
                this.on("successmultiple", function(files, response) {
                  // Gets triggered when the files have successfully been sent.
                  // Redirect user or notify of success.
                this.on("errormultiple", function(files, response) {
                  // Gets triggered when there was an error sending the files.
                  // Maybe show form again, and notify user of error
    JavaScript Easton McGrath, Sep 10, 2020

  • 1 Answers
  • 0
    At least in the console GET the request, and your router catches the POST . Perhaps there is some kind of fallback below, with middleware ('auth'), that works.

    Well, calling the image ID $ user_id is at least strange, although in this case it does not lead to an error.

    Or Apache is crookedly configured and disallows directory requests. Please note that the request path ends with a slash.
    Adalaide Livingston

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!