Laravel - how to use Uppy for image uploading

Question

I have this project with image uploading and I use Uppy for it. Here is my code:

...
<div id="drag-drop-area" name="fotografije[]"></div>
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
    <script>
        var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
...

I tried with name="fotografije[]" in div but of course it doesn't help. All I need is to name this input so that my images can be uploaded to server. How can I do this with Uppy?

Malibou · Answer 1 · 2020-06-05T11:49:02.527

So you need to download multiple files using Uppy Dashbord and Laravel

Is your backend server at https://master.tus.io/files/ ? correct it if needed.

Then you have to get back request sent from frontend to a controller (in your backend Laravel) that handle this request as Ajax POST.

This may be looks like (after adding in routes.php as POST)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class UploadFileController extends Controller
{


public function showUploadFile(Request $request) {

    $file = $request->file('fotografije');

    //Display File Name just for check or do a dd
    echo 'File Name: '.$file[0]->getClientOriginalName();


    //Move Uploaded File
    $destinationPath = 'uploads';
    $file->move($destinationPath,$file->getClientOriginalName());
 }
}

Also, don't forget to add crsf token to your uppy code to avoid bad request.

Hope this help

but how can I name my Uppy Drag and drop input file ? How can I give it a ```name="fotografije[]"``` ? — Milos, Jun 04 '20 at 13:56
According the Uppy documentation, you can do this using file-input source, https://uppy.io/docs/file-input/, I recommand tu use it with XHR destination, not TUS — Malibou, Jun 05 '20 at 12:06

score 0 · Answer 2 · answered Mar 15 '22 at 10:58

You can do like this

//this function runs after the file is uploaded
uppy.on('upload-success', (file, response) => {
  
  const url = response.uploadURL

  //get the name of file
  const fileName = file.name
  let text = "";

  //append the image after form using jquery/javascript
  //and you can send your images through form
  response.body.data.forEach(function (item, index) {
    text += index + ": " + item ;
    jQuery('<input>').attr({
      type: 'hidden',
      id: '',
      class: 'product_images',
      name: 'filename[]',
      value:item
    }).appendTo('#form_id');
  });
})

score 0 · Answer 3 · answered Sep 01 '22 at 07:53

You can do like this

 var uppy = new Uppy.Core({
                // debug: (...args) => console.debug(`[Uppy] [${getTimeStamp()}]`, ...args),
                // warn: (...args) => console.warn(`[Uppy] [${getTimeStamp()}]`, ...args),
                // error: (...args) => console.error(`[Uppy] [${getTimeStamp()}]`, ...args),
                autoProceed: true,
                restrictions: {
                    maxFileSize: 2000000,
                    maxNumberOfFiles: 10,
                    minNumberOfFiles: 1,
                    allowedFileTypes: ['image/*']
                }
            });
            uppy.use(Uppy.Dashboard, {
                target: ".UppyDragDrop",
                inline: true,
                showLinkToFileUploadResult: false,
                showProgressDetails: true,
                hideCancelButton: true,
                hidePauseResumeButton: true,
                hideUploadButton: true,
                proudlyDisplayPoweredByUppy: false,
                locale: {} });

Laravel - how to use Uppy for image uploading

3 Answers3