CODEWITHSUNDEEP
cakephpfile-uploadcakephp-2.4
Smern
Smern

Reputation: 19086

Upload multiple images with associated data

I'm looking to upload multiple pictures with associated data that will be stored in a database. The data most importantly will consist of a caption and a filename (to be able to access the image later).

I'd like it where I click an upload button, select the images that I want, the images are uploaded and shown as thumbnails (or could just be filename). Each thumbnail/filename would also have a field where the user could enter a caption for the image. Then upon submission the image uploads and the data could be linked together.

I've looked around a bit for a plugin or something that would help with this but surprisingly haven't had much luck and was wondering if anyone else had some experience with this is knows of a tool that would fit. This seems like it would be a common enough issue that someone would have made a plugin for it.

In the bigger picture, I have an items db table and an item_pics db table. I'm wanting to be able to be adding an item and at the same time upload multiple item_pics with the item_id and their own captions.

Upvotes: 0

Views: 165

Answers (3)

floriank
floriank

Reputation: 25698

Use jquery File Upload and FileStorage together. The frontend script works nice together with jquery and angular and FileStorage provides a complete stack to manage files an in application. You'll just have to add the HABTM assoc you want between items and the file_storage table. Note that FileStorage works with Amazon S3 and other storage backends as well, not only the local file system.

Upvotes: 0

kicaj
kicaj

Reputation: 2968

If You found some plugin/component/behavior for uploading file, then rebuild Your relation (for example to hasMany) and rename file fields in Your form to Model.{n}.filefieldname and should be work with multiple upload.

Upvotes: 0

XuDing
XuDing

Reputation: 2052

My 5 cents would be integrate DropzoneJs with Miles' Uploader.
DropzoneJs: http://www.dropzonejs.com/
Uploader: http://milesj.me/code/cakephp/uploader

DropzoneJs gives a very nice front-end UI, and Uploader handles pretty much everything for backend file uploading.

Upvotes: 0

Related Questions