I am working on a real-time chat application, and I want to allow users to upload their own images to use as avatars. When a user uploads an image, the backend displays the following URL: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. When I log in to the app and check the console, however, I am greeted by the following message: Not allowed to load local resource: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. I was testing, and I then decided to change the input type from file to URL, and I then pasted the random address of a google image, and then when I loaded it back into the app the image had disappeared. Is there any way to allow for user-uploaded images to be displayed? I am using stream-chat API if that also helps, as well as Heroku and nodejs.
Keep the input as type="file". The user is picking a file from their disk. It won't have a URL.
fakepath comes from trying to treat the file input as a string instead of as a file. If you are using JavaScript, don't use the value property of the field as it is only useful for informational and debugging purposes. If you are submitting a form then it needs to be able to handle file inputs (and the default enctype doesn't).
Upload the image to a server. How you do this depends on your approach, if it is with a form then the enctype attribute needs to be set to multipart/form-data, if it is with Ajax then you should start with a FormData object.
On the server, parse the request (the specifics depend on your server side environment) and save the file somewhere.
Give the file a URL (either by saving it to a place that static files are served from or by having another server side process read the file (from wherever you saved it) on demand).
Related
I am new in web development and what I am trying to achieve is as follows:
On a page where user create a blog
User upload image to a CDN via ajax and page will show image after
ajax success.
The uploaded image to CDN has a new file name and obviously URL address but the filename in input type="file" remains to be the original file name. During form submission, the ajax-returned filename has to be submitted for server side processing.
I am not sure if I am doing it the right way as how I would normally observe on many websites. My question is, how do people normally sync filenames in above case when an Ajax upload is used and the file name has been changed and stored in CDN prior to a final form submission?
I am using Django but I guess that doesn't really make a huge difference.
The goal is to generate thumbnails/previews server-side only if it cannot be done client-side.
The Fine-Uploader documentation states:
However, you should take care to not blindly return a thumbnailUrl for
images that are already previewable in modern browsers unless your
server intends to orient them correctly first.
How does the server know if Fine-Uploader is able to generate the preview client-side or not?
There is no way to reliably determine if a specific preview has generated successfully before the file upload request has been sent, as preview generation is an asynchronous process and may complete after the request has been sent. However, you can determine if the current browser has the ability to generate image preview by checking the imagePreviews feature flag. If qq.supportedFeatures.imagePreviews is true, then the current browser is capable of generating client-side image previews. If this flag is false you can set a parameter with all upload requests that instructs your server to return an image preview URL instead. For example, you can setup your params option to do this:
request: {
params: isBrowserPreviewPossible: qq.supportedFeatures.imagePreviews
}
The isBrowserPreviewPossible param w/ value will be sent with every upload request to your server. This is demonstrated in the live S3 uploader at FineUploader.com.
I'm reading TIFF and PDF files off a network drive and returning each page as an image to the browser which get displayed as JPG. This part works fine. However I'm finding it inefficient because I first have to make a request to the server to determine how many pages the file has, which results in reading in the image on the server, getting the number of pages and returning that value. Once that value is returned to the browser, I then have to make a request for each page to be returned as an image, so the file on the network drive is read in again, and the requested page number is returned as a byte[] representing a BufferedImage of the page.
What I'd ultimately like to do is make a request for the first page in the file, and then in the response to the browser, indicate the number of pages in the file so that each additional page can be requested. This would reduce the amount of requests as no initial request would be required just to determine the number of pages.
I'm not sure if this is possible. I've spent some time researching to see if I could get response headers from images, but haven't found anything.
Why not adding the info to a cookie via reponse in your image-serving controller?
If you name the cookie in a way that would "link" it to a specific set of images you wouldn't need to hassle with "how can i read headers of an image?"
I want to access url of file which user select through pop up file directory navigation window. My browse button tag is:
<input type="file" id="loadFile"/>
On the back end, i can access the file url in javascript, but not sure how to do it in PHP.
You have to have the correct enctype for the form.
Otherwise, you utilize the $_FILES super global.
This is covered extensively in the PHP Manual regarding uploads.
The original filename is available in $_FILES['load file']['name']
Since it seems that you actually want a way to have the user provide a url to a file, the way to handle that is to simply implement a text input and accept the url there, and process the url on the server, using an HTTP client that fetches and stores the file on the user's behalf.
For years people have been using the curl extension, which is fast and highly functional. There are also a number of client libraries written in php like Guzzle.
At a form, I have a file input field (for image) and I want to add an optional way to fill this field by fetching data via ajax API and this returns me the URL of an image.
How can I set the content of the field input as the URL image, especially is it possible without passing a hidden a hidden text field to pass this image URL to the server?
File inputs are for uploading the content of files from the client to the server. Since browsers won't let you (as a page author) download a file on behalf of the client, this isn't possible.
If what you were asking was possible, I could make you download a multi-gigabyte file just by making you visit my webpage. That wouldn't be a good situation to be in.
If you don't want the user to download and re-upload a file, then you don't want a file input. The other solution you mentioned (a field just containing the URL) sounds perfect for this.