I have a webpage which takes some user input and uses it to update an image by running a shell script through PHP. This image is then displayed to the user without refreshing the page they are on (using an ajax request). The general gist is:
User makes selection on web page
Web page sends ajax request to server
PHP (laravel) catches the ajax request and runs a shell script to update an image
PHP returns the ajax response and says whether the image was updated or not
If the image was updated, javascript refreshes the image for the user using the following code: $("#back_thumbdiv_med").find("> img").attr("src", url + "?" + new Date().getTime());
The problem is that the images don't load properly. Here is an example of a loaded image.
It's interesting to note that the part of the image that is showing is actually part of the old image not the new image. What could be causing this? How can I fix it? Could this be related to my site being run on a VM through vagrant?
Also, if the user navigates away from the page and back, the image will obviously return to the old version because it's cached. I'd like the images to be cached but to be able to force a refresh after the ajax request returns. What
This issue happened to be to do with running my Apache server under Vagrant (in virtualbox).
To fix the issue I just had to add the following lines to my apache config file (/etc/httpd/conf/httpd.conf or equivalent):
#Disable image serving for network mounted drive
EnableSendfile off
Note that it's worth searching through the config file to see if EnableSendfile is set to on anywhere else.
Related
Normally when you have a .PHP file and the client request it, the PHP code is run on the server and the HTML and JavaScript are sent to the client.
Question
Is it possible to have the server request a webpage (local) and run both the PHP code and the HTML with JavaScript on the server? I have created a single .html file that after 3 seconds of processing locally creates the image data for a thumbnail of the given video.
Why
I need to generate a thumbnail for a video. I used shared hosting and my hosting provider doesn't support for ffmpeg. You can, however, generate thumbnails using a canvas and JavaScript. I have already put a lot of pressure on the client. If this is possible, upload and download times would be significantly shorter than using the client.
Attempts
I've tried using file_get_contents(), but it doesn't run the code (Makes sense). Is there a way I could have it open and run for x seconds and then grab the contents?
I've tried using curl to get the file using this function here. I believe it is similar to my previous attempt in that it gets the file contents, but never executes them.
My final attempt was to use new DOMDocument(). I couldn't even get to loading the page though. First, I can't parse it with a video tag. It gives this error:
Warning: DOMDocument::load(): Specification mandates value for attribute controls in
file:\path\to\html\document.html, line: 53 in C:\path\to\php\document.php on line 50
If I were to remove the video tag (which is required), I get errors while parsing my JavaScript. So that attempt also did not work.
Is there a way that I could have PHP process the code (for something on the server) for x seconds before getting the contents? It would allow for time to generate the thumbnail data. If there is another way to do this without using ffmpeg on the server, that would be great.
So as I mentioned in comments, what I'm gonna explain is just an option (not the best one and just answering for your need of running html code!)
Where to do this?
Personally I rather to do this when the video is being uploaded by admin's browser and the best thing is that you can do this as a part of the posting procedure.
So in the page that you want this process to be done, put an invisible iframe like this.
<iframe id="myIframe" style="display: none;"></iframe>
How to begin the process?
I don't know the way you use to upload the videos (and it really is not that important!) but let's assume you want to use formdata. After the video is uploaded you need to know something unique to address the video (let's say an id). So after the video is uploaded, we can recive a code like id:20, initiateThumbnail:true as the result json data. Then we can simply use that hidden iframe to be the browser you've been asking for like this:
$("#myIframe").attr("src","dothething.php?video=20");
Now do what ever you wanted to do in it and change it's content after it's done. Now you need to wait for the result!
$('#myIframe').load(()=>{
let result = $("#myIframe").contents();
// checking result!
});
As you have already thought about, you can handle any errors by processing the result.
Notes
The event listener we used for iframe (iframe.load) fires when you initiate making the thumbnail as well. So be careful with the process of checking result (content of that iframe!)
If you don't use ajax or formdata, simply the action of your form is what I used as iframe.
One question? What happens if network connection goes down during this process? Simple answer! You can check in so many ways that the thumbnail exists or not. If not you can create it once that user requests for it in his browser and upload it back to server and save it for ever (as you did it in admin's panel!)
I think there isn’t another way to generate thumbnail on php server than with ffmpeg.
The only thing you can do, I suppose, is to force canvas generation on page load if you aren’t already doing it.
Anyway you are trying to do something wrong. Php doesn’t evaluate the html code, it’s just a preprocessor and not an interpreter like the browser. You can wait all the time of the world, but you’ll never get the content of the image that only a browser will generate.
I am using angular and ASP.NET Web API to allow users to download files that are generated on the server.
HTML Markup for download link:
<img src="/content/images/table_excel.png">
<a ng-click="exportToExcel(report.Id)">Excel Model</a>
<a id="report_{{report.Id}}" target="_self"></a>
The last anchor tag is there to serve as a place holder for an automatic click event. The visible anchor calls the exportToExcel method to initiate the call to the server and begin creating the file.
$scope.exportToExcel = function(reportId) {
reportService.excelExport(reportId, function (result) {
var url = "/files/report_" + reportId + "/" + result.data.Model.fileName;
var dLink = document.getElementById("report_" + reportId);
dLink.href = url;
dLink.setAttribute('download', result.data.Model.fileName);
dLink.click();
});
}
The Web API code creates an Excel file. The file, on the server is about 279k, but when it is downloaded on the client it is only 7k. My first thought was that the automatic click might be happening before the file is completely written. So, I added a 10 second $timeout around the click event as a test. It failed with the same result.
This seems to only be happening on our remote QA server. On my local development server I always get the entire file back. I am at a loss as to why this might be happening. We have similar functionality where files are constructed from a database blob and saved to the local disk for download. The same method is employed for the client side download and that seems to work fine. I am wondering if anyone else has run into a similar issue.
Update
After the comment by SilentTremmor we think it actually may be IIS or some sort of Sever issue. Originally, we didn't think it could be, but after some digging it may be. It seems the instance of the client code is only allowing 7k of data to be downloaded. It doesn't matter what we try to download the result is always the same.
It turns out the API application was writing the file to a different instance of our application. The client code had no idea and was trying to download a file that did not exist. So, when the download link was creating the file it was empty, thus the small file size.
In my web app, I have a large collection of thumbnails, the user is able to select a thumbnail and client side recrop from the original image to recreate a new thumbnail.
That's fine, in my app, I just set the newly created image instantly to the image source, without reloading it from the server, and next to this, the new image is uploaded to the server. This is to ensure a very responsive feeling. The problem is that when to user refreshes the page, he sees the cached old version of the thumbnail.
I know I could use some image.jpg?sometimestamp to be sure the browser has to download a new version of the thumbnail, but as I said, the app needs to be very responsive, even on small &slow internet connections. (Thats why the app in itself is stored on the user's computer and not downloaded live. Only uploads, downloads and jsons are transitting)
The ideal solution would be to be able to tell the browser : remove this particular file from your cache : someurl.com/somefolder/image.jpg, so that the browser has to fetch it again when it needs it. is this possible and how?
So I'm not asking how not to cache files or how to force re-verification each call, I'm asking how I could remove some particular file from browser's cache.
ps: this can be a webkit-only solution as this is the only platform it is running on.(it is actually a qtwebkit on a Qt project.
The function window.URL.revokeObjectURL() can solve your problem.
The URL.revokeObjectURL() static method releases an existing object
URL which was previously created by calling
window.URL.createObjectURL(). Call this method when you've finished
using a object URL, in order to let the browser know it doesn't need
to keep the reference to the file any longer.
For details: https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL
Note that this is an experimental function with limited cross-browser support.
You can't. Append a ?[something_volatile] to the request when you need to download it again, and you'll get the same effect. That method won't take away any of the snappiness if you only change the appendage string when needed.
Sorry for necropost, but I think it could be helpful for others in the same situation:
When your upload is done, perform an AJAX get request with no-cache header.
By specifing this in the REQUEST, you tell the browser to ignore cache and to perform a new request to server.
Assuming I have a cached image at /images/jondoe.jpg, it could be like this :
Code (using Axios):
Axios.post('/upload/new-image', FormDataObject).then(() => {
Axios.get('/images/jondoe.jpg', {headers: {'Cache-Control': 'no-cache'}}).then(reloadPageFunction)
// Now you'll have a new image in your cache
})
Maybe this link is useful for u, according to it, u can use below code :
caches.open('v1').then(function(cache) {
cache.delete('/images/image.png').then(function(response) {
someUIUpdateFunction();
});
})
I have a page with a link to a file. When the link is clicked I use the code below to show a loading message:
$('#TerritoriesToExcelLink').click(function() {
$('#TerritoriesToExcelLoading').show();
window.location.href = $(this).attr('href');
});
I'd like to hide the message once the file is downloaded and the save dialog pops up in the browser.
I've tried adding some code that fires on ready() but that seems to just run straight away (presumably since the page is already loaded even if the file isn't) so the loading message never gets displayed.
How can I hide the loading message once the file has been completely downloaded?
Have your server send a random cookie that you specify from your client-side code with your download in the HTTP headers. Poll in your Javascript to check for the presence of the cookie. This should tell you when the browser has your file.
If you aren't opposed to using flash...
You could create an invisible flash object on the page, then when you click the download link, you could trigger flash to download the file, then handle the flash download complete event and use the ExternalInterface API to raise the event in javascript.
This is not possible to do with front end javascript, there is no way for it to retrieve the progress of a download and it doesn't have any events relating to downloads.
I don't think tracking the progress can be done with server side languages either.
This is what I want to do:
I want to send an HTTP request to a server, potentially returning a PDF file. But the server may also just return an error code (PDF file unavailable, PDF file invalid, PDF system down, etc). When I get the PDF, I would like to open the PDF and refresh the page that loaded the PDF, because the PDF is then marked as "read". When I get an error code (or timeout), I would like to redirect the page to an error screen. Downloading Google Chrome works in a similar manner:
http://www.google.com/chrome/eula.html?hl=en&platform=win
This is what I don't want do:
For performance reasons, I don't want to issue two requests as suggested in this question here:
Download and open pdf file using Ajax
Two requests can mean:
Make a request for the PDF and return a code to indicate whether the PDF is available or not. If unavailable, immediately display an error page
If it is available, open a window and request the PDF again in that window, and display it.
That's expensive because the PDF's have to be accessed via remote systems. I don't want to access the PDF resource twice. Another solution involving two requests:
Make a request for the PDF and retrieve an error code or a temporary URL where the PDF is cached. On error, immediately display an error page
If the PDF is available, open a window in which the cached PDF is displayed.
This will require for quite a large cache for the PDF's
This might be an interesting lead:
I found this question here giving me some information about how I could download the binary data and make it available in JavaScript as binary data:
Is there a way to read binary data in JavaScript?
Maybe that's a nice lead, but of course it won't solve my problem yet, as I want to use the browser's default editor to open the file, just as if I had requested the file from a normal URL.
So the question is:
Can I download binary data and open them like a regular document from JavaScript? If not, I'll cache the document in some managed memory container in Weblogic and just hope that this won't kill our system. Please only respond:
If you know for sure it cannot be done (some links explaining why would be nice)
If you know how to do it
If you have a different solution doing roughly what I want to do (not issuing two requests)
The implemented "old-school" solution works like this:
The JavaScript client sends an AJAX request to the server to "prepare" a PDF document
The server responds with any of these three messages:
a) Document available at URL http://www.example.com/doc.pdf
b) Document unavailable
c) Document being "prepared" (i.e. client has to wait)
The JavaScript client then reacts as such:
a) Open the returned URL in a new window, refresh the current window after 5 seconds
b) The current window is redirected to an error screen
c) The current window stays unchanged and AJAX polling is implemented to repeat step 2