You can see my live example here: http://friendsconnect.org/scrapbooks/live_example.php. You may see that some pictures, for whatever reason, arn't being uploaded. Why is this? Does uploadify have certain restrictions, and if so how do I lift them? I have check the documentation here: http://www.uploadify.com/documentation/ but I haven't found anything relating to the problem. You can see below, some pictures are "broken" and turn out to not be even uploaded.
I'm also using a timthumbs script to reduce the file size, but that's not the problem as it says "File not found" and so the file doesn't exist, which leads back to the problem residing with uploadify. Any ideas?
EDIT: Images are JPG files, but can range. Size varies but mainly from 1-2MB.
It may be an issue with your PHP script. I've just uploaded a picture, and your web page is giving me the following details:
URL: http://www.friendsconnect.org/jquery_custom/create_user_image.php?src=/scrapbooks/uploads/image.png&h=80&w=100
Content:
<pre>no mime type specified<br />Query String : src=/scrapbooks/uploads/image.png&h=80&w=100<br />TimThumb version : 1.26</pre>
Now, you're putting that text/html content into a img tag, which obviously won't work, and so we get this broken image thing.
NB: This only occurs on some of my uploaded images, most work fine.
Related
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
I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.
Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max
While working with blueimg fileuploader library:
https://blueimp.github.io/jQuery-File-Upload/
If I add jpeg/jpg image with more than 2MB it shows wrong file size. And uploaded file also has the wrong file size.
Is it a bug of the library or i'm missing any configuration?
I have found that filesize is changed after rendering with its template rendering script (https://github.com/blueimp/JavaScript-Templates).
Edit:
Found the solution image resize option need to be disabled.
disableImageResize :true
Though default configuration is true.
I add an answer just so that other people will not come here trying to solve this since it's already resolved i take it.
OP needed to set the property disableImageResize to true to prevent the plugin from changing the images.
I'm displaying images like this:
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />
/get_image/{{image.id}} returns some JSON with the URL to the actual image, and then I replace the src attrivute of the <img> tag using jQuery.
The problem I have is that the image is displayed on the browser only when it's been completely downloaded. For large images, this can take a while and some users are thinking that the image is never loading, despite the fact that placeholder.jpg says "Loading..."
It would be great if the image that's replacing the placeholder would actually visibly load (for instance top to bottom like most JPEGs) as opposed to just suddenly displaying when all of it has been downloaded.
A way to show a progress bar would be even better.
Does anybody have suggestoins?
You can use preloader, but still should wait for image to load completely.
Other solution relies on how you saved the images.
You can open the image in an application like photoshop and when saving the file, click on the PROGRESSIVE option(Progressive option will make the image viewable even if it is not completely loaded).
In Photoshop:
Open the image
Click on the File -> save For Web ... (or Save for Web and Devices on previous versions)
On the upper right part of the opened dialog, choose the 'JPEG' format
You will see some options, choose 'Progressive'
Save
This option will make the file slightly bigger in size, but the browser will show the images as they load.
Rather you can add image attribute 'title' or 'alt' value as 'Loading .... '
as title or alt property get displayed to user if image is about to load.
after image get loaded using Javascript you can change the alt or title value.
this is a basic solution. you can use it until you find proper solution.
Your question is very similar to my question where I discovered a solution which worked for me. It is unclear if it will work for you though because commenters have suggested it is dependent on the image being saved with the progressive option enabled.
For my case, the initial image always showed as it loaded and so my solution seemed to utilize that. For your case, if you were to initially load your big file first as a testcase and it appeared as it was downloaded, then I suspect my solution would also work for you.
I have a folder full of .jpg images. With a PHP script I'm reading the list of images in the folder and I'm displaying them on the browser.
The problem is that some of the images exist, but something it's wrong with them. They are few Kb but they can't be displayed (on the browser I see like a broken image), of course if I download these images in local I can't see them.
I tried to google but all I found was how to recognize a broken link or an empty img tag, how can I check if the image is displayable? I also tried the onError event but it isn't fired.
IMO, you’d be better off checking this on the server, using PHP. PHP has several functions to load images, such as imagecreatefromjpeg and imagecreatefrompng. Both these functions will return FALSE if there’s an error loading the image. Getting FALSE will tell you that it’s not a valid image.