I've been trying to get this very Fine Uploader (fresh from NPM - 5.12.0-alpha) set up to push some data to S3 and I've been having some issues with chunking. I have enabled chunking I believe based on the example from Concurrent Chunking but I have not seen multiple chunks being uploaded in the XHR console.
const fu = require('fine-uploader/lib/s3');
const SA = require('superagent');
let x = new fu.s3.FineUploaderBasic({
request: {
endpoint: 'they-taken-mah-bucket.s3.amazonaws.com'
},
credentials: {
accessKey: 'invalid',
expiration: new Date(),
secretKey: 'invalid',
sessionToken: 'invalid'
},
objectProperties: {
bucket: 'they-taken-my-bucket',
key: 'filename'
},
autoUpload: false,
debug: true,
callbacks: {
onComplete: function(){
moveUpload({from:'active', to:'finished', hash: activeUpload.hash}).then( function() { good(hash); });
},
onError: function(id, name, reason, xhrCache){
moveUpload({from:'active', to:'error', hash: activeUpload.hash}).then( () => bad(new Error('upload error - '+reason)) );
},
onProgress: function(id, name, uploaded, total){
const elapsed = (Date.now() - t.getTime()) / 1000;
const rate = uploaded / elapsed;
updateUploadProgress({hash: activeUpload.hash, progress: (100*uploaded/total).toFixed(0), rate: rate});
},
chunking: {
enabled: true,
concurrent: {
enabled: true
}
},
maxConnections: 5,
retry: {
enableAuto: true,
maxAutoAttempts: 10
},
onCredentialsExpired: function () {
return fetchCredentials();
}
}
});`
The behavior I'm seeing: http://recordit.co/z5VnLR63eT
Essentially I see the OPTIONS request, that goes fine, and the upload starts correctly but I only see 1 outbound connection - and the content type is not what I would expect, it's multipart form instead of raw. Though perhaps I'm wrong in this expectation, I would have expected it to just be a raw bin post.
Any advice would be most appreciated.
Your options are not set correctly, and this is why concurrent chunking is not enabled.
You defined the chunking option inside of the callbacks section. Move it out of callbacks (along with maxConnections and retry).
Related
all,
I am writing a front-end of my app, using Vue. I need to request some information from the back-end, launched on the same server.
I added proxy like this:
module.exports = {
devServer: {
port: 2611,
proxy: {
'/api/markets/light': {
target: 'http://localhost:2610/markets/light',
ws: true,
logLevel: 'debug',
pathRewrite: {
'^/api/markets/light': '/markets/light',
},
},
},
},
}
(I've tried different combinations of the parameters, like excluding pathRewrite, '^/api/...' instead of '/api/...', etc.)
This is how data is requested from the code:
created() {
axios.get(this.$store.getters.marketsLightLink)
.then(response => this.markets = response.data)
.catch(error => console.log(error));
}
marketsLightLink simply concatenates strings:
const store = new Vuex.Store({
state: {
marketDataHost: '/api',
markets: {
markets: '/markets',
marketLight: '/markets/light',
},
},
getters: {
marketsLightLink(state) {
return state.marketDataHost + state.markets.marketLight;
},
},
});
So when i open the page, where i should see the results of the request, i just see 404 error in the browser's console and no data downloaded. At the same time I see, that the link is proxied correctly:
[HPM] Rewriting path from "/api/markets/light" to "/markets/light"
[HPM] GET /api/markets/light ~> http://localhost:2610/markets/light
And when i press the resulting link, the requested information is shown in the browser.
Can anyone help me, what am I doing wrong please?
I need to upload large video files in the background.
What is the best way to achieve this?
I tried using this library (react-native-background-upload). But the problem is, I can't send any other data along with the video file. The API expects the following data:
{
projectId: number,
title: string,
video: file,
};
This is the piece of code to send the files with multipart using the library:
const options = {
url: url,
path: pathToVideoFile,
method: 'POST',
field: 'video',
type: 'multipart',
};
Are there any alternatives that I can use? Can react-native-background-fetch be used for this use case?
in react-native-background-upload
you can use parameters in options to send additional data
Additional form fields to include in the HTTP request. Only used when type: 'multipart
const options = {
url: url,
path: pathToVideoFile,
method: 'POST',
field: 'video',
type: 'multipart',
parameters : {
key1: "value1",
key2: "value2",
}
};
you can see all options params here here
you can install react-native-compressor package which is made by me
Installation
yarn add react-native-compressor
Usage
import {Video} from 'react-native-compressor';
const headers={
'Content-Type': '',
}
const uploadResult = await Video.backgroundUpload(
"http://w.hbu50.com:8080/hello.mp4",
fileUri,
{httpMethod: 'PUT', headers},
(written, total) => {
onProgress({
status: 'uploading',
progress: written / total,
uploading: true,
});
},
);
I'm trying to create default broadcast for my live stream with privacy set to 'unlisted' or 'private' bud it's always being created with privacy 'public', event though privacyStatus field is provided in request body:
REQUEST:
const res = await this.request(callback => youtube.liveBroadcasts.insert({
auth: auth,
part: 'snippet,contentDetails,status',
resource: {
snippet: {
title: "Some Title",
description: "Some description",
scheduledStartTime: "2020-03-11T12:08:43.087Z,
isDefaultBroadcast: true
},
status: {
privacyStatus: 'unlisted'
},
}
}, callback))
CHUNK OF RESPONSE:
data:
...
status:
{ lifeCycleStatus: 'ready',
privacyStatus: 'public',
recordingStatus: 'notRecording',
selfDeclaredMadeForKids: false }},
...
Is this a normal behaviour, or am i doing something wrong ? BTW update works fine.
If this is a normal behaviour it should be mentioned somewhere here:
https://developers.google.com/youtube/v3/live/docs/liveBroadcasts/insert
I have problem with uploading files from my ember.js frontend to grails backend. I can't use any of ember plugins like ember-uploader because of supporting IE8. Any advices how to solve this problem ?
BlueImp's jQuery File Upload claims it supports IE 6+. Read more about it:
https://github.com/blueimp/jQuery-File-Upload
I use it via an Ember component like this:
{{file-upload uploadUrl=uploadUrl filename="files"
buttonText="Upload files"
hiddenName="fileId" hiddenValue=fileId
uploaded="filesUploaded"}}
and initialize the plugin in the component's didInsertElement:
didInsertElement: function() {
var self = this;
this.$('#'+this.get('inputId')).fileupload({
dataType: 'json',
url: this.get('uploadUrl'),
formData: function() {
return [{name: self.get('hiddenName'), value: self.get('hiddenValue')}];
},
done: function(e, data) {
self.sendAction('uploaded', data.result);
self.markCompleted(data.result.filenames);
},
fail: function (e, data) {
self.sendAction('failed', data.result);
},
add: function(e, data) {
data.process().done(function () {
data.submit();
});
},
});
Thanks for response kielni, but I used different approach than yours.
I used solution from this blog post: Cross-browser AJAX uploads with Ember.js and mOxie
And code in component that worked for me:
var fileInput = new mOxie.FileInput({
browse_button: this.$('.file-pick-button').get(0),
multiple: false
});
fileInput.onchange = function (e) {
var file = fileInput.files[0];
var reader = new mOxie.FileReader();
reader.onloadend = function () {
ajax({
type: "POST",
timeout: 5000,
url: config.serverURL + '/files/',
data: {
transportID: id,
filename: file.name,
file: reader.result
}
});
};
reader.readAsBinaryString(file);
};
fileInput.init();
I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action.
What I've done till now is:
Creating a form with this script:
new Ext.FormPanel({
fileUpload: true,
frame: true,
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
}).getForm().submit()
/*
The response Content-Type is text/html (with charcode=utf8);
The response JSON is: { "success": true }
*/
Setting the response Content-Type to text/html based on this answer.
Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:
{"success":false}
or
{"success":true}
I even set the response Content-Type to application/json. But still no success.
I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired.
Here's a working example - Javascript code:
Ext.onReady(function () {
Ext.define('ImagePanel', {
extend: 'Ext.form.Panel',
fileUpload: true,
title: 'Upload Panel',
width: 300,
height: 100,
onUpload: function () {
this.getForm().submit({
url: 'upload.php',
scope: this,
success: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Success: " + data.msg);
},
failure: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Failure: " + data.msg);
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'fileuploadfield',
buttonText: 'Upload',
name: 'uploadedFile',
listeners: {
'change': {
scope: this,
fn: function (field, e) {
this.onUpload();
}
}
}
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('ImagePanel', {
renderTo: Ext.getBody()
});
});
And PHP code:
<?php
if (isset($_FILES)) {
$temp_file_name = $_FILES['uploadedFile']['tmp_name'];
$original_file_name = $_FILES['uploadedFile']['name'];
echo '{"success": true, "msg": "'.$original_file_name.'"}';
} else {
echo '{"success": false, "msg": "No Files"}';
}
I have been struggling with this for quite some time now as well. Here's my code:
Ext.getCmp('media-upload-form').getForm().doAction('submit', {
url: './services/recordmedia/upload',
method: 'post',
waitMsg: 'Please wait...',
params: {
entityId: this.entityId,
},
failure: function(form, action){
alert(_('Error uploading file'));
this.fireEvent('file-upload');
this.close();
},
success: function(form, action){
this.fireEvent('file-upload');
this.close();
},
scope: this
})
The response was always wrapped in <pre> tags by the browser, what caused the Extj lib not to call the callbacks. To fix this:
make sure your server returns the correct json: {"success":true}
make sure that the content-type is set to text/html
Actually, this is well covered by docs for Ext.form.Panel and Ext.form.Basic. The problem with your code not working is that there are no config options "success", "failure" for the form panel. You should put them in the config object passed to the submit action. So your code should look like:
new Ext.FormPanel({
fileUpload: true,
frame: true
}).getForm().submit({
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
});
Note the difference: In Ext 4, there is a form component (Ext.form.Panel) which is basically a view component concerned with how you form looks, and then there is the underlying form class (e.g. Ext.form.Basic) concerned with the functionality. Form submissions are handled by Ext.form.Basic (or whatever returned by your form.getForm()).