Symfony 2 form field - image preview instead of file path - javascript

I write an application with Symfony 2. I have a form which has a file field.
When there is no file chosen the view is a button of "choose file" and on the right of it text 'No file chosen'. When i select a file, the file-name appears on the right of the button.
I would like to change this behaviour:
When no file is chosen, show only the button.
After choosing a file, instead of showing the file-name I would like to generate a preview of the image.
Anyone has a simple solution for this problem?
Thanks!

you can change the css of the input type file to visibility:hidden and display a button there... and you can make a jquery event like this
$(document).ready(function(){
$("#idofbutton").click(function(){
$("#idofinputtypefile").trigger('click');
});
});
and the rest you can use an iframe stimulate the upload event.
for jquery file upload please check the code link this link
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
hope this helps

Related

Dropzone with draggable area and input in different locations

I'm trying to use Dropzone in my application to enable drag and drop upload. The problem is: I can't upload the file at the time I select a file, I need to wait the user click on 'Submit' on entire form (I don't have a form only to file upload) to upload my file.
And I have another problem, the draggable area (my div) is not in the same place as my input (where I need my uploaded file).
It's something like this:
<form ...>
<input type="file"/>
</form>
<div id="myDivWhereUserWillDropTheFile">
</div>
Is that possible to solve with Dropzone?
It depends on the exact flow you want to achieve, but to disable autoupload take a took at autoProcessQueue and autoQueue options.
http://www.dropzonejs.com/#config-autoProcessQueue
From there you can use a addedfile event handler to programmatically set your input
http://www.dropzonejs.com/#event-addedfile

How to upload image in CKEDITOR with a Django backend?

I have done proper research of many image plugins which upload images to server using php scripts.I just want to know a proper way to upload images to a django-based server.
Here's I think what a approach should be -
On clicking a toolbar button,a dialog will be opened.UI elements of the dialog will include a form with a file type,two fields for height and width and a button (upload to server).On adding a image file and fields and clicking upload button,ajax call will be sent (am i right here? or form submit should handle it.) to the server where a particular view will handle saving image to a specified folder.
On success server will return the full path of the image and dialog will insert in the editor.
Sorry if my question is very naive but I just wanted to know if my assumptions are right before starting off.
Thanks
There is a Django package
https://github.com/django-ckeditor/django-ckeditor
This comes with a demo app. I would advise to look into that, and see how it works.
Basically you will have to configure the media url and there is a setting for ckeditor where to upload the media. Ckeditor will handle the image upload for you.
Uploaded content will be show in an overview page, where you will have the option "use image in text"

How to style html upload button and still have text on the side?

i'm making a small photo upload website and I am trying to style the 'select file' button for the upload page. On the
<input type="file" name="uploadedfile"><br> line I have tried adding a class to it and style it, but all that does it style the background, not the button itself. Does anyone know how to style the button, and keep the filename there? I want to style it kinda like the button and progressbar in this pic http://prntscr.com/3jcwmr
The workaround usually done for this is hide the uploadfile button. Create a customized good looking image or button and then write a javascript which onclick of this customized image or button actually clicks the hidden uploadfile button.

Javascript/jquery hide loading image from select files screen

I am using this image show/hide script
Instead of using a submit button, I want to submit the form by using onchange submit in the file select field. Until here, everything is working fine. However, when I click the cancel button in the (pup-up) file select screen, the loading image won't hide. I have no clue how to solve this, and any suggestions are welcome.

HTML5 File Upload Input - onChange

When the user selects files to be uploaded I present one of two buttons to take action on the file(s) based on how many files there are. I get the number of files by including an onchange=getNumFiles(this) in the file input tag.
My problem is that I hide the button to take action on the files after the user clicks it, and if the user selects the same file(s) a second time the button is not "re-presented". This is happening because the file upload input never actually changed because the input is still holding the original file selection. How can I account for this?
Is there a way to clear the contents of the file upload input? I've tried setting the value to null to no avail. Or is there a different event other than onchange that I should be using? hope this makes sense....
"Is there a way to clear the contents of the file upload input"
Yes, call .reset() on the form.
$("#myform")[0].reset();
Now if the same file is selected again it will correctly trigger a change event since it changed from nothing to something again.

Categories

Resources