I am trying to use the plupload flash widget as it works in all browsers for multiple image upload.
For every image I want my users to select a property from a dropdown box. As every image used in my site represents a property image type ex- rear image, side image, front image etc.. these options will be in the dropdown.
I would like to know, if I can dynamically inject a dropdown to pluploader.
Here is an image to see as how exactly I would like to have the drop down box for every image.
http://www.diigo.com/item/image/2ma3g/9wsq
Upon inspection of the jQuery queue element it is easy enough to determing how to inject your dropdown box into the DOM.
Because it is based on jQuery you can simply use something like..
$('#uploader_filelist li').each(function(index,data){
$(this, '#plupload_file_name').append('<html>Your html here</html>');
});
That is a very simple sample but that is how you would inject markup dynamically into the queue.
The problem is when you do it? And how to identify it later. With this you need to go back to the plupload API and attach events (Documentation here) to the following:
public event FilesAdded(uploader:Uploader, files:Array)
public event UploadProgress(uploader:Uploader, file:File)
And you will need to handle chunks in the script as well as the uplaod handler you are using to retrieve the dropdown value using multipart_params that get set on each chunk uploaded.
Adding the drop down is easy, making sure the process is handled all the way around is another problem and can take some time to perfect.
Related
I am building a simple admin-on-rest application. One of the features is the user to export the content from a list view. So far I have two possible approaches in mind.
Export based on the selected filters (my favorite).
Export based on the selected rows from the table using check boxes.
I guess two things are necessary to achieve that:
Be able to render a button somewhere in "list view": would be great to add an "export" button inside the "filters" section. I couldn't find a way to render an "export" button keeping the filters.
That "export" button would be able to get the filters (from the list view filter section) for creating my custom URL for downloading the data. Or if using check boxes, detect the selected rows from the table and export that data.
I have been looking for examples or following other colleagues questions and I coundn't come up with anything similar. Any info/example/project will be much appreciated.
This is quite solvable. The filter is stored in the redux form and can be accessed by any connected component. I am guessing you have an API endpoint available that you can ping with the filter data and that can then generate the file and respond with the file URL.
1) Write a connected button component. This should have a mapStateToProps method to access the current filter data
https://marmelab.com/admin-on-rest/List.html#actions
2) It should also dispatch an action that generates a POST request.
https://marmelab.com/admin-on-rest/Actions.html#using-a-custom-action-creator
IMPORTANTLY: You will have to think about how the file itself will get downloaded. Since you are generating the URL on the fly, it will not be embedded in the model data so you do not have access to it. You might have to hard code a file name and path into your components so clicking will always lead to a download. Though this is not as trivial as it sounds, as the file generation itself will be an async operation. I think clicking this button should lead to a redirect to a page where the download link is displayed.
Just to complement krunal's answer, there's a library called FileSaver that can take a json response and start a file save operation with its content, showing a file save dialog, or even download it directly to a file of your choice.
I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/
i'm trying to implement an edit/add profile page which looks the following:
image upload component (Tomahawk t:inputFileUpload) with upload button
several input text fields
cancel and save button
As said, this form is used for adding a new profile as well as editing existing ones. At first, i used two elements, one for the text input, one for the upload component. The problem with this is, since the upload componenet does not support ajax/ partial rendering, the whole page is reloaded and any changes on the text inputs is lost. When i use one unified , the validation is triggered on the textfields when the upload button is pressed and the user is forced to fill out all the inputs first, before it is possible to upload an image.
My desired behaviour would be, that if the textinputs are unchanged, i can still upload the picture while changes are being applied to the backing bean and validated. Validation on unchanged/empty fields should only be triggered, when the final submit button is pressed. How can this be done? Any standard scenario/best practice methods for this or do i have to implement a valueChange Listener? Thank you guys in advance and kind regards!
Solved the problem, i wrote a custom validator and checked for the action that triggered the submission of the form using this:
ctx.getExternalContext().getRequestParameterValuesMap().containsKey("form:uploadButton");
Where ctx is the current instance of FacesContext. Maybe this helps someone, it is a workaround however it does the job.
Is it possible to abort a save operation in a Joomla controller? (Admin Side)
For example:
I have a view with a list of items. I hit the New Item button and in the next page I enter all required fields and hit save. My form also has a file upload field for uploading a small image. That image has to be 25 by 25 pixels or else the new item won't be saved.
The only way I found so far to abort the save operation (if an error like the image size is found) is to call the cancel() method parent::cancel(); in the controller. This takes the user back to the list of items. I need to know if there's another method that will reload the new item form view with all the fields filled from the previous post so the user can just select a correct image and re-post the form without the need to fill all the fields from scratch.
Currently I'm fine with the cancel() method and if the user hits the browser's back button he will probably get back to the form with all the fields loaded, but I was just wondering if there is a way to reload the form.
I don't think there is a way to accomplish this without doing a lot of coding and hacking. Have you considered trying to gauge the size of the image using JavaScript before the image is uploaded? Or allowing people to save the normal data first and then ask for the image?
I have a dropdown, that contains some list of StudentCode...
when user select any studentcode student data should be displayed in form with student's Image...
for displaying Student Image, Im putting student image in cache memory... and I have one Iframe that gets the byte data from cache memory and render that image on my page... problem is... this thing need at least 1 postback...
can I make some partial postback to render this image?
I see couple problems with the implementation.
1) You should avoid using IFrames in general as there are better ways of handling rendering parts of the webpage.
2) Storing images in cache means that you actually downloaded all of them for each Student in the dropdown list and placed them in the cache. What if there are 100 students? Getting images for all of them and storing them might take a lot of resources.
I suggest you to do the autopostback on dropdown selected value change (via ajax call) which calls a method that will return a partial view with all the information you need for the particular student, including the image.
I found using Ajaxify library (http://max.jsrhost.com/ajaxify/) very easy and convenient for ajax calls.
You can do the same thing without ajax at all in which case the whole page will reload with the same result.