I am using ng-flow in my application and it works pretty well. Currently, the destination directory for the files being uploaded is set in my web.config and used within my webapi controller method.
What I want to do is allow the user to specify the destination, rather than it come from config. However, looking at the docs, I don't see an option that I can add to the below appconfig for this:
function appConfig(flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'api/upload',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4
};
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
}
Am i missing something or do I need to handle this myself?
You should see a clear separation between your front end and you back end. That is why you are not able to set in flow-js or any other framework.
What you can do, is let the user specify it in a form field and leave the handling to the server side. This way it is also possible to filter on allowed locations. You don't want your client to add files to your system directories.
Related
In the Extjs classic framework we use Ext.form.Panel to initiate a file download. In the Modern framework I have been unable to get Ext.form.Panel to do the same. So how can I perform a simple file download (of a potentially large file) in the Modern framework. I would rather not have to change the server side code.
This is the code we use in Classic
params={};
params.doc_path=rec.get('server_path');
params.doc_link_name=rec.get('name');
var form = Ext.create('Ext.form.Panel', {
standardSubmit: true,
renderTo: Ext.getBody(),
url: '/document/download',
method: 'POST',
timeout: 120
});
// Call the submit to begin the file download.
// Note that neither Success nor Failure are ever called
form.submit({
params: params
});
This is the server side code in our ruby server
def download
# A small helper to download the file passed in doc_path
send_file params["doc_path"], type: 'application/octet-stream', disposition: 'attachment', filename: params["doc_link_name"]
end
If we try that in Modern our server does not receive the correct url. (We get a routing error).
File upload using a form in Modern works just the same as Classic, so why doesn't the file download work the same?
Does anyone have some sample code on how to use Ext.exporter.file to download a file from a server? I have read the docs and just got lost. And in any case when I put in a require for Ext.exporter.file I get a 404 not found error, so that is out of the question.
I just need click and forget so no need to track success or failure.
Thanks to Imagine-breaker for his answer in this post I implemented this function:
downloadURI: function(uri, name) {
var link = document.createElement("a");
if(!name)name="";
link.setAttribute('download', name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
}
and call it like this
lfg.downloadURI('/document/download?doc_path=' + encodeURIComponent(rec.get('server_path')),rec.get('name'));
Server side code remains exactly as is. I might implement this in our Classic version of the app as well - it seems so much simpler.
I am trying to override file:/// URLs, whether pointing to files or directories, to let my extension show its own file browser for directory views and also potentially allow editing of individual files for files.
I made the following attempt, but the listener was never triggered for either files or folders:
browser.webRequest.onBeforeRequest.addListener((details) => {
const {documentUrl, originUrl, type, requestBody, url} = details;
if ((/^file:/).test(originUrl)) {
return {
redirectUrl: browser.extension.getURL('filebrowser/index.html') + '?abc=1'
};
}
}, {
urls: ['file:///*/*']
}, ['blocking']);
I did add the "file:///*/*" permission to the manifest ("<all_urls>" also didn't work) (and I added "web_accessible_resources" for the redirect, but that was never even reached).
I am guessing this may be because of https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter#Type , where it states that only requests made using HTTP/HTTPS will work for events despite file patterns supporting other protocols. However, onHeadersReceived does seem to receive at least the file:/// file requests (though not directory requests) even though onBeforeRequest which is needed for redirects, does not.
Can anyone confirm whether there are any workarounds?
I am trying to build a simple photo upload app on Ionic (Cordova). I am using the cordovaImagePicker plugin to have the user select images from the mobile device. This plugin returns an array of paths on the device.
For handling the upload part I am using jquery-file-upload (mostly because that is what I used for the browser version and I am doing all kinds of processing for which I have the code ready). The problem is however that jquery-file-upload expects to work with an input element <input type="file"> which creates a javascript File object containing all kinds of metadata.
So in order to get the cordovaImagePicker to work with jquery-file-upload, I figure I have to convert the filepath to a File object. Below I am using the cordova file plugin to achieve this:
$cordovaImagePicker.getPictures($scope.pickOptions).then(function(filelist) {
$.each(filelist, function (index, filepath) {
$window.resolveLocalFileSystemURL(filepath, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
fileObj = new File([this.result],"filename.jpg",{type: "image/jpeg"});
// send filelist from cordovaImagePicker to jquery-fileupload as if through file input
$('#fileupload').fileupload('send', {files: fileObj});
};
reader.readAsArrayBuffer(file);
}, function(e){$scope.errorHandler(e)});
}, function(e){$scope.errorHandler(e)});
});
}, function(error) {
// error getting photos
console.log('Error selecting images through $cordovaImagePicker');
});
So first of all this is not really working correctly, apparently I am doing doing something wrong, since for example the type attribute ends up being another object that contains the type attribute with the correct values (and other such weird issues). I would be happy if someone could point out what I am doing wrong.
Surely there must be something (cordova plugin?) that I am not aware of that does this conversion for me (including for example adding a thumbnail)? Alternatively, maybe there is something that can easily make jquery-file-upload work with filepaths? I couldn't find anything so far...
However, it feels I am trying too hard here to force connecting two components that were just not built to work together (File objects vs filepath) and I should maybe just rewrite the processing and use the cordova file transfer plugin?
I ended up rewriting the uploader with the cordova-file-transfer which works like a charm. I wasted more time trying to work around it than just rewriting it from scratch.
im trying to make a streaming service where i stream the content of a file (in this case a video) into a video element.
for this purpose i have downloaded and installed videogular and is now trying to set it up however im sure how to do it.
According to the documentation on videogular to load a video you would need a syntax like this:
sources: [
{src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"}
]
Which is fine for when you want to load the content in without streaming.
But say for instance you have a node server running at port 8105 and the file you wish to collect had an id of 1 then the result might look something like this:
sources: [
{src: $sce.trustAsResourceUrl('http://localhost:8105/loadvideo/1'), type: "video/mp4"}
]
However in my attempt to do so it would just tell me that the resource is not an actual resource.
My question is how do you stream to a video content (preferably with videogular) and does anyone know of examples where people have made this possible?
Server side code
Okay so my initial idea (and i know this is a change for the code above) was to create a route that took at path:
router.route('/retrieveFile')
.post(function (request, response) {
var path = '../' + request.body.data;
var file = fs.createReadStream(path);
file.pipe(response);
});
And then piped the output of the file.
Then use this to stream the file
If you have video files on your harddrive and you want to serve them all with their filenames, you should just use Express Static to serve them just like any other resource
You can add a path prefix '/videos' to differentiate them from regular resources.
app.use('/videos', express.static('videos'));
Then a video file ./videos/myvid.mp4 would be available as http://localhost:8000/videos/myvid.mp4
To have a file available as a file, you need to set the appropriate headers before piping
And to load the file you'd put this code in your router, and where you're using post, if you don't have a strong reason I'd just use get or all
You might also wanna be able to end the transmission if client decides to disconnect mid-stream
Alternatively you might want to go with res.download instead of streams, which which case appropriate headers and interruptions are automatically handled.
So the whole code might look like this:
router.route('/path/to/video.mp4')
.all(function(req, res){
res.header('content-disposition', 'filename="video.mp4"')
var stream = fs.createReadStream('./resources/video.mp4');
stream.pipe(res);
require('on-finished')(res, stream.abort.bind(stream));
// or simply
res.download(fs.readSync('/path'))
});
Then you can use http://localhost:8000/path/to/video.mp4 to either directly load the video into your browser, it'll play it if it can or simply offer to download. Or you can use this URL in your videgular
sources: [ {src: $sce.trustAsResourceUrl('http://localhost:8000/path/to/video.mp4'), type: "video/mp4"} ]
I download fine uploader 3.5, created http handler for a file upload function in my little website . the website is done by asp.net ajax and jquery. it runs at IE9. every time I upload a file, there is a list of file names shown below the load button. if I don't want thme, what should I do?
my code is like this:
html: ...
'<tr><td><div id="jquery-wrapped-fine-uploader"></div></td></tr>...
'ajax/jquery:...
'$('#jquery-wrapped-fine-uploader').fineUploader({
'request: { endpoint: 'xxx.ashx' }
'})
'$('#jquery-wrapped-fine-uploader').on("complete",
'function (event, id, fileName, responseJSON) {
' alert("UPLOAD SUCCESS");
' $.ajax({some ajax calls here});
' })
// WHERE TO PUT this TO CLEAR the UPLOADED FILE LIST??? $('#jquery-wrapped-fine-uploader').fineUploader('reset');
XXX.ashx:
'... public void ProcessRequest (HttpContext context) {
'do some http request work..
'context.Response.ContentType = "text/plain";
'context.Response.Write("{\"success\":true}");
'}
My question is:
I want to completely remove the uploaded file list which shows automatically in green color ( or red if they fail), in order to clear them, I tried to put: $('#jquery-wrapped-fine-uploader').fineUploader('reset'); right after .on('complete'), it's not working, also #jquery-wrapped-fine-uploader seems cached all the time. please help on this.
If you don't want to see the file list at all, you should be using FineUploaderBasic mode instead of using FineUploader mode and then removing all elements in the pre-built UI. FineUploaderBasic mode gives you access to the API, options, and callbacks, but assumes you will be creating your own UI. In other words, FineUploaderBasic mode does not create any DOM elements (except the opaque file input element as a child of your button container, if you supply one). This is all explained (in a great amount of detail) in the documentation.
Start here: http://docs.fineuploader.com