Getting drag and dropped files icon using Javascript - javascript

I want to get an icon's image when a user drags and drops it over some kind of div, but that it'll show exactly what the user sees (e.g. thumbnail, *.ico), is it possible to do so, or does anyone know of any projects that do similar things?

I would suggest a mix of:
This great drag and drop upload library:
http://valums.com/ajax-upload/
This javascript code to preview uploaded images before they upload
How to upload preview image before upload through JavaScript
You would have to add a listener in Valum's uploader to get the file that is being uploaded and then display it using the code in the second link.
Getting the local image path via javascript is not an easy task... and being able to do that while supporting most browsers will be even worst...
An easier way to solve your problem would be to upload the image in a temporary location on your server, return that temporary path and display the image that was just uploaded. Then you add a second "Keep" and a "Discard" button that saves the uploaded image to a real path if the user likes what he uploaded and you delete the temporary image. Since your images are .ico, I assume they are not really big files, so they would upload pretty fast and the user would get a "preview" fast too using that technique.
You should ask yourself if all the time invested on tweaking your code to show the user a preview before the upload really improves the user's experience using your tool !

You may need some extra work for converting ico files to file formats viewable in browsers (e.g., JPEG, PNG.)
Drag and drop the images to the browser is possible if you use HTML5's Drag and Drop API. (https://developer.mozilla.org/en/DragDrop/Drag_and_Drop, http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/).
After capturing the user input, you can upload the images to your server. After that you can convert the images whatever you want them to be. Finally you can show the images to the users.

Here is a great tutorial that I think can help you with many problems. If I understood your problem right.
http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

I don't know if you want to use html5, but I think that with jQuery you can do that. I've found this url: http://decafbad.com/2009/07/drag-and-drop/api-demos.html#data_transfer
Here you've a "Using drag feedback images", maybe this can help to you :)

Related

WYSIWYG Texteditor Image Delete/Upload Logic

Im using laravel with summernote wysiwyg text editor. I want user to be able to insert images to the text.
First i tried using the default summernote upload method. Basically it turns upload image to a base64 data url. Then after posting it, in a controller, that base64 is decoded into an actual image, saved to the server, and the img that src part is turned into a public image url that leads to the current server.
This worked fine with small images. But it didn't work well with big images. Post didn't work and i didn't get any error from anywhere. I assumed that it was because of the base64 part. I also saw THIS THREAD which made me wanna change base64 part even more.
So i switched to using onImageUpload callback without even thinking about it much. I saw lots of tutorials suggesting it.
With this callback, whenever user insert a image to the editor (before the post), OnImageUpload function is called in js. In that function, ajax sends to image to the controller, controller saves the image to the server and responds with its public url. Finally editor uses that url to show the image in the editor.
Issue starts here with deleting images.
There is a OnMediaDelete function which has issues. It does not work with delete/backspace key for example. And even if that worked properly, a user can insert pictures and leave the page (or use one bugs of the onMediaDelete callback) which means there isn't a easy way to determine if the uploaded image is actually used in a text or not. Server would be filled with unused images?
How do you deal with this? Should i upload the images to a temp file during the editing and carry them to a actual folder if there are being used after the post? This would require stuff like cron to keep temp folder empty won't it? Is this how people deal with this?
Or should i just disable uploading images with text editor? Maybe a small content management for images in another part of the server?
Whole thing feels so simple but i am really struggling with it. I feel like i am missing a huge point here. Please help me. Sorry for this weird question. Thank you

HTML : load thumbnail image and full image faster

I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?
Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!
Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one

jQuery Download Images to Folder

I was looking at this question Download image with JavaScript which shows how to download an image.
I want to be able to do something similar but more automated. I would like to navigate to an imgur page, enter some search parameters then use jQuery to download any .jpeg or .png
I have the basic layout
navigate to imgur and search
find all .jpeg and .png in page
run code similar to other question to download
What I want to know, is can I specify a specific folder to save the images to?
Can I automate the click of the Save button?
If this is not possible in pure jQuery/javascript my other choice is to default to using iMacros with some javascript mixed in, I would however like to avoid this.
This is not possible using only JavaScript.
A user's interaction will always be required in order to save a file. Imagine the mess we'd be in if that weren't the case... Viruses everywhere!

How to Convert HTML file TO GIF

I am creating wait Cursor using CSS and google Js file.
Now I want convert That HTML file into GIF file...
Because I am using other JS file in my project so some page is conflict with google js file.
This is the link of my HTML page which I want to convert.
https://docs.google.com/file/d/0B_r9LchWcj7zMnQtdnRUaC1DUjA/edit
One way to do this is with a screen capture software. Create a video of the loader, then clip it to one cycle. Then, if you have a Mac, download the Gifrocket app, which converts the video to a gif. I had a rough go at it, and this was the result:
I was looking for something similar when I needed to convert a piece of Rich Media Ad to GIF. I used this very useful and free program called ScreenToGif. Here's the link for it:
http://www.screentogif.com
I suggest you to do the below .. Its a bit weird, but I assume that will work for you.
Do the below steps.
Download and install a screen capture software, for instance, Snagit.
Run your HTML along and enable the Video screen capture/ image sequence screen capture.
Open Photoshop, import the video/image sequence of the HTML that you have video captured which is having the wait cursor effect for which you need the GIF.
Save for web/export to the gif format.
This is how you can get what you are looking for, as HTML to GIF converter sounds impractical to achieve what you want.
Hope this helps.

Automatic image upload and display in a form

How to make the browser upload and display image after the user puts it in the file upload widget? I've got a form where an image should be uploaded and edited by the user on the fly (before they hit submit). Can I do it with Jquery?
Take a look at the JQuery MultiFileUpload plugin.
MultiFileUpload plugin should give you what you're looking for. It's important to remember that ajax does not support transferring binary files - you'll need an embedded IFrame to do the work for you.

Categories

Resources