So I am having an issue where I am trying to upload some images after a vehicle was created on my site. I am using Laravel for my site and am using Bootstrap File Input (http://plugins.krajee.com/file-input) to handle the uploading of files but instead of using their built in ajax I am storing the images in a separate form and uploading that form with Ajax. If I check the network tab in chrome dev tools, I can see that multiple images where sent, but I only see one image in my controller.
HTML:
<input id="fileupload" type="file" name="images[]" multiple data-preview-file-type="text"
accepts="image/*" multiple="true" data-browse-on-zone-click="true">
Store Images:
$('#fileupload').on('fileloaded', function (event, file, previewId, index, reader) {
console.log('added image');
imageData.append('images', file);
});
Ajax:
$.ajax({
type: "POST",
url: '{{ route('ajax.newVehicleImageUpload') }}',
data: imageData,
contentType: false,
cache: false,
processData:false,
}).done( function(data) {
console.log(data);
if (data == true) {
toastr.success('Successfully uploaded images.');
}
spinner.hide();
}).fail(function(jqXHR, textStatus) {
spinner.hide();
});
PHP:
if (isset($_FILES['images'])) {
$files = $_FILES['images'];
$count = count((array) $files['name']);
for ($i = 0; $i < $count; $i++) {
$baseFileName = strtolower(str_replace(
' ',
'_',
sprintf('%s-%s-%s-%s-%s-%s.jpg',
trim($request->year),
trim($request->make),
trim(str_replace('-', '_', $request->model)),
trim(Dealer::where('id', '=', \Auth::user()->dealer_id)->first()->cpin),
trim($request->stock_number),
trim(str_random(5)))
));
$location = public_path('images/vehicles/' . $baseFileName);
Image::make(
$files['tmp_name'][$i]
)->resize(
640,
480
)->save(
$location
);
$sequence++;
$newImage = new \App\Vimage();
$newImage->sequence = $sequence;
$newImage->inventory_id = $inventory_id->id;
$newImage->vehicle_id = $request->vehicle_id;
$newImage->dealer_id = \Auth::user()->dealer_id;
$newImage->name = $baseFileName;
$newImage->isStockPhoto = false;
$newImage->isDeleted = false;
$newImage->save();
}
return ('true');
}
So instead of saving the file, I can save the reader variable which gives me the base64. I can just send that and decode it.
$('#fileupload').on('fileloaded', function (event, file, previewId, index, reader) {
console.log(reader.result);
imageData[] = reader;
});