2 votes

Upload file with bootstrap input file in laravel 5

I am uploading a file using the plugin bootstrap input file which I managed to upload successfully in what I have difficulty in returning the path to the plugin to be able to order or delete them in the documentation I have 2 methods which are

initialPreview: [
        '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',

and the other is

initialPreviewConfig: [
        caption: 'desert.jpg', 
        width: '120px', 
        url: 'http://localhost/avatar/delete', // server delete action 
        key: 100, 
        extra: {id: 100}

but it indicates that I have to return them in json which I do but nothing happens it does not update the file field this is my driver

public function Save(Request $request)
               //obtenemos el campo file definido en el formulario
                $file = $request->file('input-25');

                //obtenemos el nombre del archivo
                $nombre = $file->getClientOriginalName();

                //indicamos que queremos guardar un nuevo archivo en el disco local
                \Storage::disk('local')->put($nombre,  \File::get($file));
               $public_path = public_path();
                 $url = $public_path.'/storage/'.$nombre;
                 $initialPreview= array(
                 return response()->json($initialPreview);



and this is the script of the plugin

        uploadUrl: "{{ url('/subirpdf')}}",
        uploadExtraData: {_token:"{{csrf_token()}}"},
        language: "es",
        maxFileSize: 1000,
        required: true,
        allowedFileExtensions: ["pdf"],
        showRemove: true,
        initialCaption: "Subir Archivo en pdf con las caracteristicas del producto",
        msgFilerequired: true,
        initialPreviewAsData: true,

        deleteUrl:"{{ url('/eliminarpdf')}}",



Shassain Points 2710

Greetings, your json The response time would be wrong, which is why your delete button does not work, although you say that you have two functions:


initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',

in which the path , url o etiqueta of the image you uploaded, which you should already have in $url = $public_path.'/storage/'.$nombre; which is your code and assuming that the image has already been stored there should be no problem there.


initialPreviewConfig: [
    caption: 'desert.jpg', 
    width: '120px', 
    url: 'http://localhost/avatar/delete', // server delete action 
    key: 100, 
    extra: {id: 100}

where caption is the name that will be displayed in the loaded image, width the width of the image, url is the image deletion url on the server in your case there must be a path in laravel ( Ex: Route::post('eliminarimagen/{id}','ImagenController@eliminar'); ) where in the function eliminar you should be the corresponding steps to delete the image, we continue with key which can be the id of your image in your database, and extra where all the extra data you need should be, in laravel many times you send the _token .

Having explained all that, I publish a basic example:

$url = \Illuminate\Support\Facades\Request::root().'/eliminarimagen/'.$temporal->id;//ruta total de eliminacion
$res1[0] =\Illuminate\Support\Facades\Request::root().$temporal->image;//nombre de la imagen
$res2[0] = ['caption' => $temporal->image, 'width' => '120px', 'url' => $url, 'key' => $key,'extra'=>['_token'=>$token]];
return json_encode([
    'initialPreview' => $res1,
    'initialPreviewConfig' => $res2,
    'append' => true

Where $temporal is the object that stored the image in the database (I don't know if in your case it was necessary), and $temporal->image contains the image path.

I hope it is of some use to you.


HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by: