In a Django application, during registration, I want the user to be able to see the profile image he/she selects, rather than just see a path as done purely using django forms (for an example of what I want see pinterests registration form). I assume it should involve some ajax upload and it should be stored somewhere temporarily since the user might choose not to proceed with the registration even if the profile image has been uploaded, in which case the uploaded picture should be deleted.
I was wondering what is the best way of handeling this? Any examples out there you can point to?
Thanks!!!
You are correct that an AJAX upload will be needed.
Whether the upload is temporary or permanent, things will not change much in your implementation much. In both cases you will need to upload the image to a directory on your web server. In the temporary case, you may delete it after a short amount of time passes.
Here is a Django AJAX uploader: https://github.com/GoodCloud/django-ajax-uploader
Option 1
You can use the HTML5 FileAPI to show a thumbnail of a user-selected image before they upload it.
Option 2
You can upload the file using AJAX and then send back a thumbnail for them to preview
Related
I want to upload images Facebook style: select the images before submitting the form and when they are all uploaded, submit the form instantly. I know how to do it in the frontend, but the problem is in the backend. I have found some ways of managing the images in the backend but I'm not satisfied. The great deal of all this is avoiding to store the photos that won't be used, like if the user closes the browser while some photos are already uploaded. I have in mind 3 ways of doing the upload and I don't know which would be the best:
Create a "tmp" directory and place all the uploaded photos there, and when the form is submitted move all the used photos to another directory. (With this method there can be some concurrency problems)
Create a TempPhoto table in my database and do the same as the previous solution, moving the used photos from TempPhoto to the permanent table.
Add the photos directly to the permanent table and erase the ones that are not used (that are not related to other entity) at a scheduled time. (I suppose this would be the slower solution)
I think your first way with some reformations is the best way. You can create a tmp directory and attach a unique data (e.g. IP address) to each image that takes control on concurrency and then write some script in $(window).unload(...) for send a signal to the backend that remove the image(s) from tmp directory when user close window before submitting the form.
I have a website that is using Django's admin interface to facilitate non-developers adding content to the site. The site has an Events page (and associated model), and each Event can have an associated photo gallery.
I'm thinking that photo galleries should have their own model. There is a table in the database which associates image paths with their Event.
What I need is a way to upload images. Preferably a multiple-file upload solution since there could be dozens of images per event. I want these images to be recorded correctly in their table and added to the file system in the correct location on the server.
I was originally thinking that the upload feature should be included on the Event admin page to make it easier for content contributors, but maybe it would be easier to keep a separate photo gallery admin and have them select the Event the photos are associated with from there?
I've read through a lot of similar questions and blog posts, but nothing that seems to be quite exactly what I'm looking for. I'm currently attempting to adapt some of the information I've seen, but I'd really appreciate suggestions. Thanks for any help on this!
You can create Some model with foreign key to Event, and ManyToMany to your Images, as I understand your question.
At first upload necessary images to some Image model and than add them to Some model with some Event
I'm really confused with the process of uploading a file (image or pdf in my case) to a Django app programmatically (via HTTP POST or PUT request). I've read the doc but I must admit it hasn't helped me get through. The most confusing part to me is the template (and form) : why do I need to specify a template and form in the view ?
I just want to send a file to a directory, and I'd like to know what exactly is needed in order to do so on the Django part as well as on the request part (content-type... ?)
I'd be really grateful to anyone able to show me some direction here..
You don't say what doc you're reading, so it's hard for us to tell what you mean. But if you're planning on doing a programmatic upload, you don't need a template, of course. You do however need some code that accepts the POST and processes the upload: you can do that with a form, or simply access the data in request.FILES and do what you want with it yourself.
Edit It's true that that page doesn't make any reference to uploading programmatically, because most people's use cases are uploading through the browser, via a form. But the page does explain how to handle uploaded files, which is the only bit that you need.
I am working on a django app to store user pics and photos.
What is the optimal approach to store individual user media.
File Sizes are no more than 5MB.
The data is persistent.
The approach i have in mind is:
On form data submission, Upload it to an FTP server using django-storages.
Store the url and fetch it via http later for user.
How to save upload files to another server
I have seen the answers and I don't know what type of queue needs to be used.
you'd usually save the file locally and then latter upload it to some cloud service asynchronously, preferably using something like django-celery
see this answer
I'm implementing an image upload feature for my Django app (plain Django 1.4 , NOT the non-rel version) running on Google App Engine. The uploaded image is wrapped in a Django model which allows the user to add attributes like a caption and search tags.
The upload is performed by creating a Blobstore upload url through the function call blobstore.create_upload_url(url). The function argument is the url to which the Bobstore redirects when the upload is complete. I want this to be the url of the default Django form handler that performs the save/update of the model that wraps the image so I don't have to duplicate default Django behaviour for form validation, error reporting and database update.
I tried supplying reverse('admin:module_images_add') to create_upload_url() but this doesn't work as it throws an [Errno 30] Read-only file system exception. I presume this originates from the default Django form handler again trying to upload the file the standard Django way but then hits the brick wall of Google App Engine not allowing access to the file system.
At the moment, the only way I can see to get this working without duplicating code is by strictly separating processes: one for defining an image model instance and the second for uploading the actual image. Not very intuitive.
See also this question and answer which I posted earlier.
Any suggestions on how to get this working using one form and reusing Django default form handlers?
EDIT:
I've been reading up on decorators (I'm relatively new to Python) and from what I read, decorators appear to able to modify the behaviour of existing Python code. Would it be possible to change the runtime behaviour of the existing form handler to solve the above using a decorator? I obviously have to (1) develop the decorator and (2) attach it to the default handler. I'm not sure if (2) is possible as it has to be done runtime. I cannot patch the Django code running on GAE...
Well, I finally managed to get this working. Here's what I did in case anyone runs into this as well:
(1) I removed the ImageFile attribute from my model. It ended up causing Django to try and do a file upload from the file system which is not allowed in GAE.
(2) I added a Blobstore key to my model which is basically the key to the GAE BlobStore blob and is required to be able to serve the image at a later stage. On a side note: this attribute has limited length using the GAE SDK but is considerably longer in GAE production. I ended up defining a TextField for it.
(3) Use storage.py with Daniel Roseman's adaption from this question and add the BlobstoreFileUploadHandler to the file handlers in your SETTINGS.PY. It will ensure that the Blobstore key is there in the request for you to save with your model.
(4) I created a custom admin form which contains an ImageField named "image". This is required as it allows you to pick a file. The ImageField is actually "virtual" as its only purpose on the form is to allow me to pick a file for uploading. This is crucial as per (1).
(5) I overwrote render_change_form() method of my ModelAdmin class which will prepare a Blobstore upload url. The upload url has two versions: one for adding new images and one saving changes to existing. Upload urls are passed to the template via the context object.
(6) I modified the change_form.html to include the Blobstore upload url from (5) as the form's action.
(7) I overwrote the save_model() method of my ModelAdmin:
def save_model(self, request, obj, form, change):
if request.FILES.has_key("blobkey"):
blob_key = request.FILES["blobkey"].blobstore_info._BlobInfo__key
obj.blobstore_key = blob_key
super(PhotoFeatureAdmin, self).save_model(request, obj, form, change)
This allows me to retrieve the blob key as set by the upload handler and set it as a property of my model.
For deletion of image models, I added a special function which is triggered by the delete signal of the model. This will keep the Blobstore in sync with the image models in the app.
That's it. The above allows to upload images to the blob store of GAE where each blob is neatly wrapped in a Django model object which admin users can maintain. The good thing is that there's no need to duplicate standard Django behaviour and the model object of the image can easily be extended with attributes in the future.
Final word: in my opinion the support for blobs in plain Django on GAE is currently very poor considering the above. It should be much easier to achieve this, without having to rely on Django non-rel code and a rather long list of modifications; alternatively Google should state something about this in their developer documents. Unless I missed something, this is undocumented territory.