1

I'm using Laravel 5.4 and passing the form data using JQuery. Below is the JQuery code piece

 $('#upload_product').on('click', function () {
        var data = $("#create_post").serializeArray();
        data.push({images: jQuery.makeArray(files)});
        console.log(data);
        jQuery.ajax({
            url: '<?php echo $edit ? 'post/update' : '/sell/upload_product';?>',
            data: data,
            type: "POST",
            cache: false,
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr.status);
                console.log(xhr.responseText);
                console.log(errorThrown);
                console.log(textStatus);
            },
            success: function (data) {
                $('#postResult').html(data);
            }
        });
    });

Console data

enter image description here

Route

Route::post('/sell/upload_product', function (Request $request) {
    // echo $request[9];
    return view('_components.upload_product', ['title' => $request['title'], 'availability' => $request['availability'], 'category' => $request['category'],
        'subcategory' => $request['subcategory'], 'currency' => $request['currency'], 'price' => $request['price'], 'product_details' => $request['product_details'],
        'community' => $request['community'], 'images' => $request['images']]);
});

But $request['images'] giving empty result.

Edit 1

I'm getting the File objects from the form using JQuery, below is the code piece

function preview_images() {
        files = event.target.files;

        for (var i = 0; i <= 6; i++) {
            if (i >= 1) {
                $('.compPhoto' + (i + 1)).html("<img src='" + URL.createObjectURL(event.target.files[i]) + "'>");
            } else {
                $('.compPhoto' + (i+1)).html("<img src='" + URL.createObjectURL(event.target.files[i]) + "'>");
            }
           /* console.log(URL.createObjectURL(event.target.files[i]));*/
        }
    }

Where the function preview_images() gets triggered when there's any change in the file input.

TIA

silverFoxA
  • 4,549
  • 7
  • 33
  • 73
  • what is the output of `return $request->all()`? It sounds like you have to use `$request[9]['images']` – cre8 Jun 04 '17 at 06:42
  • @mimo `$request->all()` shows up everything except for the `images` Here is the result `Array ( [title] => hjhj [availability] => 1 [category] => Accessories [subcategory] => Sub-Category [currency] => INR [price] => 7676 [product_details] => nbnbnbnb [community] => 1 [_token] => k0KskYZf1kgV8Z5rJmEzhRA5jadHWBiQ1lkDq4eu [undefined] => )` – silverFoxA Jun 04 '17 at 06:49
  • Does the input _images_ have type _file_? – Sᴀᴍ Onᴇᴌᴀ Jun 04 '17 at 06:57
  • @SamOnela it's array of files – silverFoxA Jun 04 '17 at 07:04
  • @SamOnela I shall verify the same and update my question if required – silverFoxA Jun 04 '17 at 07:07
  • @SamOnela Sorry!! but I don't see the reason or link between the two – silverFoxA Jun 04 '17 at 07:09
  • Yes- check out the answers that mention [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) – Sᴀᴍ Onᴇᴌᴀ Jun 04 '17 at 07:09
  • But I'm getting the image file from the form using `JQuery` please follow the image attached above – silverFoxA Jun 04 '17 at 07:11
  • where does the javascript variable _files_ come from? Please edit your post to include any relevant code for it (e.g. initialization, modification) – Sᴀᴍ Onᴇᴌᴀ Jun 04 '17 at 20:31
  • I know we marked it as duplicate but if you provide information about where that JS variable comes from then I will look at it again and might vote to re-open this... – Sᴀᴍ Onᴇᴌᴀ Jun 05 '17 at 21:03
  • @SamOnela I have updated the question. Please have a look – silverFoxA Jun 06 '17 at 11:52
  • Uploading files traditionally requires special handling on the form (e.g. setting the [enctype](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype) attribute to '_multipart/form-data_'. With Asynchronous requests (i.e. AJAX) there are helper objects like [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) (read more [here](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file)). If you want to discuss this more, we could do a [chat] room... – Sᴀᴍ Onᴇᴌᴀ Jun 06 '17 at 15:37

0 Answers0