Upload file with bootstrap input file in laravel 5

2

I'm uploading a file using the bootstrap input file plugin which I succeed in uploading in what I submit makes it difficult to return the path to the plugin to order or delete them in the documentation I have 2 methods that are

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

and the other one 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 must return them in json which I do but nothing happens, it does not update the field file this is my controller

public function Save(Request $request)
        {
                 if($request->ajax())
             {
               //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(
                     '$url'
                );
                 return response()->json($initialPreview);

             }

        }

and this is the plugin script

  $("#input-25").fileinput({
        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,
        showUploadedThumbs:false,
        initialPreviewAsData: true,

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

    });
    
asked by Andersson Meza Andrade 02.11.2017 в 01:03
source

1 answer

1

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

First:

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

in which must be the path , url or etiqueta of the image that you loaded, which you must already have in $url = $public_path.'/storage/'.$nombre; which is your code and assuming that the image is already stored There should not be a problem until there.

Second

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 shown in the loaded image, width the width of the image, url is the url of image removal in the server in your case there should be a route in laravel ( Ex: Route::post('eliminarimagen/{id}','ImagenController@eliminar'); ) where in the function eliminar must 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 must be, in laravel the _token is often sent.

Explained all that, I publish a basic example:

$temporal->save();
$key=$temporal->id;
$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 I store the image in the database (I do not know if it was necessary in your case), and $temporal->image contains the path of the image.

I hope it helps you.

    
answered by 02.11.2017 / 04:36
source