Good day,
I am trying to replace individual file / image upload fields with Dropzone. After adding the Dropzone code, the images are now uploading to an individual folder: (storage_path('app/public/images')
Could someone please advise on how I could assign different upload paths for each listing (post), as well as how I could assign a different name attribute to each image ( in order to store the image names in different columns in the database)?
Please find the code below.
View file:
<form method="post" action="{{ route('dropzone.store') }}" enctype="multipart/form-data"
class="dropzone" id="dropzone">
@csrf
</form>
</div>
<script type="text/javascript">
Dropzone.options.dropzone =
{
maxFilesize: 10,
renameFile: function (file) {
var dt = new Date();
var time = dt.getTime();
return time + file.name;
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
addRemoveLinks: true,
timeout: 60000,
success: function (file, response) {
console.log(response);
},
error: function (file, response) {
return false;
}
};
</script>
Controller:
class ImageController extends Controller
{
public function index()
{
return view('image');
}
public function store(Request $request)
{
$image = $request->file('file');
$avatarName = $image->getClientOriginalName();
$image->move(storage_path('app/public/images'),$avatarName);
$imageUpload = new Image();
$imageUpload->filename = $avatarName;
$imageUpload->save();
return response()->json(['success'=>$avatarName]);
}
}
Oin your case you need to store the image connected to each post. In that case, you need access to the post as well. You probably want a path like app/public/images/posts/1/avatar.png. So your image controller also needs this information. You can send it along in the URL using route model binding or you can send it as extra information in the dropzone config.
From there it's generating the correct path and you're good to go ;)
@bobbybouwmann Thank you for the reply. I have tried to change the upload path in the Controller (as below), but are not sure about the code and syntax. Any assistance would be appreciated.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Image;
use Illuminate\Support\Facades\Storage;
use Auth;
use App\Property;
use App\User;
use DB;
class ImageController extends Controller
{
public function store(Request $request, $id)
{
$property = Property::findorFail($id);
$image = $request->file('file');
$avatarName = $image->getClientOriginalName();
$image->move(storage_path('app/public/images' . $property, $avatarName);
$imageUpload = new Image();
$imageUpload->filename = $avatarName;
$imageUpload->save();
return response()->json(['success'=>$avatarName]);
}
}
This is the code you've written, right? I get the feeling you're changing something in an existing application.
I'm also not sure what your followup question is at this point. What is not working for you?
@bobbybouwmann Thank you for your reply. The application currently has a "create page" with a few individual image upload inputs, in order for a user to add images when creating a new property (post). I I would like to remove the individual image upload inputs and rather direct a user to another page (after creating a new property), where they can then use Dropzone in order to upload the images for that respective property (post). Could you perhaps please advise on how I could assign the images (using Dropzone) to the respective property (post)?
The best way to solve this is either storing the path in the database or storing a model in the database and connect that to the model.
@bobbybouwmann Thank you for the reply. I used the below code multiple times (for image2, image3, image4 etc.) in order to store each image with a different path in the database. Could you please advise on how I could assign different paths to each image using Dropzone?
// Handle file upload
if($request->hasFile('image2')){
//Get filename with extention
$filenameWithExt = $request->file('image2')->getClientOriginalName();
// Get filename only
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
// Get xetention only
$extention = $request->file('image2')->getClientOriginalExtension();
// Filename to Store
$fileNameToStore2 = $filename.'_'.time().'.'.$extention;
// Upload Image
$path = $request->file('image2')->storeAs('public/image2', $fileNameToStore2);
} else {
$fileNameToStore2 = 'noimage.jpg';}
// Handle file upload
if($request->hasFile('image3')){
//Get filename with extention
$filenameWithExt = $request->file('image3')->getClientOriginalName();
// Get filename only
$filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
// Get xetention only
$extention = $request->file('image3')->getClientOriginalExtension();
// Filename to Store
$fileNameToStore3 = $filename.'_'.time().'.'.$extention;
// Upload Image
$path = $request->file('image3')->storeAs('public/image3', $fileNameToStore3);
} else {
$fileNameToStore3 = 'noimage.jpg';}
You can create the path in your PHP code, just like you do now. You just need to make sure the path is unique for each file.
I'm not sure what the current problem is you're trying to tackle.
Alright, thank you. If I had to use the below code once for each image that are being uploaded, could you please advise on how I could then assign a name attribute for each image in my Dropzone view page?
public function store(Request $request)
{
$image = $request->file('image1');
$avatarName = $image->getClientOriginalName();
$image->move(storage_path('app/public/image1'),$avatarName);
$imageUpload = new Image();
$imageUpload->filename = $avatarName;
$imageUpload->save();
return response()->json(['success'=>$avatarName]);
}
@bobbybouwmann Thank you for your assistance and advise! Implemented multiple dropzones for now (and resize the dropzone containers). The multiple dropzones might also work well when a user would like to edit or replace a specific image at a later stage. Thank you.
Please or to participate in this conversation.