We are using IOS file upload dialog in order to use video files with our service using react.
All video files are working in android platforms and all browsers in linux and MacOS. However, when we use video files with upload dialog in IOS IPhones such as Iphone 14 Pro Max, then the compress process starts and following that the dialog rejects the video file.
We have been debugging with browserstack using a real phone in a simulator, however no luck until this point.
When we select the file, it firstly runs a compression activity then changes the name of the file to an intermediate file name (as below, the original file name is different), and then upload procedure fails.
Below is the react part which triggers upload mechanism which works with every platform and operating system with exception of IOS.
export const UploadVideo = async (file, signedurl, uploading) =>
{
let resultState = { state: '', data: {} };
if (SERVER_STATUS !== 'localhost')
{
await axios({
method: 'put',
url: signedurl,
data: file,
headers: { 'Content-Type': 'application/octet-stream', },
onUploadProgress: uploading
}).then(function (response)
{
resultState.state = 'success';
}).catch(function (error)
{
resultState.state = 'error';
resultState.data.message = error.message;
window.toastr.error(error.message);
})
} else resultState.state = 'success';
return resultState;
}
The error message I notice here, OS Status error -9806 refers to, according to osstatus.com a secure transport result code. More specifically this one, on Apple's documentation
My take here is that the system is not trusting this URL, I would suggest adding your URL to trusted domains under NSAppTransportSecurity in the Info.plist file. More info on how to do that here.
This is not a solution I would go for for a production app tho, you might want to have a valid certificate for your production URL and app.
Hope this helps.
Related
I have an IOS project using Amplify as a backend. I have also incorporated Amplify Video in the hope of supporting video-on-demand. After adding Amplify Video to the project, an "Input" and "Output" bucket is generated. These appear outside of my project environment when visualised via the Amplify Console. They can only be accessed via navigating to AWS S3 console. My questions is, how to I upload my videos via swift to the "Input" bucket via Amplify (or do I not)? The code I have below uploads the video to the S3 bucket within the project environment. There is next to no support for Amplify Video for IOS (Amplify Video Documentation)
if let vidData = self.convertVideoToData(from: srcURL){
let key = "myKey"
//let options = StorageUploadDataRequest.Options.init(accessLevel: .protected)
Amplify.Storage.uploadData(key: key, data: vidData) { (progress) in
print(progress.fractionCompleted)
} resultListener: { (result) in
switch result{
case .success(_ ):
print("upload success!")
case .failure(let error):
print(error.errorDescription)
}
}
}
I'm facing the same issue.. As far as I can tell the iOS Amplify library's amplifyconfiguration.json is limited to using one storage spec under S3TransferUtility.
I'm in the process of solving this issue myself, but the quick solution is to modify the created AWS video resources to run off the same bucket (input and output). Now, be warned I'm an iOS Engineer, not backend, only getting familiar with AWS.
Solution as follows:
The input bucket the amplify video plugin created has 4 event notifications under the properties tab. These each kick off a VOD-inputWatcher lambda function. Copy these 4 notifications to your original bucket
The output bucket has two event notifications, copy those also to the original bucket
Try the process now, drop a video into your bucket manually. It will fail but we'll see progress - the MediaConvert job is kicked off, but will tell you it failed because it didn't have permissions to read the files in your bucket. Something like Unable to open input file, Access Denied. Let's solved this:
Go to the input lambda function and add this function:
async function enableACL(eventObject) {
console.log(eventObject);
const objectKey = eventObject.object.key;
const bucketName = eventObject.bucket.name;
const params = {
Bucket: bucketName,
Key: objectKey,
ACL: 'public-read',
};
console.log(`params: ${eventObject}`);
s3.putObjectAcl(params, (err, data) => {
if (err) {
console.log("failed to set ACL");
console.log(err);
} else {
console.log("successfully set acl");
console.log(data);
}
});
}
Now call it from the event handler, and don't forget to add const s3 = new AWS.S3({}); on top of the file:
exports.handler = async (event) => {
// Set the region
AWS.config.update({ region: event.awsRegion });
console.log(event);
if (event.Records[0].eventName.includes('ObjectCreated')) {
await enableACL(event.Records[0].s3);
await createJob(event.Records[0].s3);
const response = {
statusCode: 200,
body: JSON.stringify(`Transcoding your file: ${event.Records[0].s3.object.key}`),
};
return response;
}
};
Try the process again. The lambda will fail, you can see it in the lambda's CloutWatch: failed to set ACL. INFO AccessDenied: Access Denied at Request.extractError. To fix this we need to give S3 permissions to the input lambda function.
Do that by navigating to the lambda function's Configuration / Permissions and find the Role. Open it in IAM and add Full S3 access. Not ideal, but again, I'm just trying to make this work. Probably would be better to specify the exact Bucket and correct actions only. Any help regarding proper roles greatly appreciated :)
Repeat the same for the output lambda function's role also, give it the right S3 permissions.
Try uploading a file again. At this point if you run into this error:
failed to set ACL. INFO NoSuchKey: The specified key does not exist. at Request.extractError. It's because in the bucket you have objects in the protected Folder. Try to use the public folder instead (in the iOS lib you'll have to use StorageAccessLevel.guest permissions to access this)
Now drop a file in the public folder. You should see the MediaConvert job kick off again. It will still fail (check in MediaConvert / Jobs), saying it doesn't have permissions to write to the S3 bucket Unable to write to output file .. . You can fix this by going to the input lambda function again, this gives the permissions to the MediaConvert job:
const jobParams = {
JobTemplate: process.env.ARN_TEMPLATE,
Queue: queueARN,
UserMetadata: {},
Role: process.env.MC_ROLE,
Settings: jobSettings,
};
await mcClient.createJob(jobParams).promise();
Go to the input lambda function, Configuration / Environment Variables. The function uses the field MC_ROLE to provide the role name to the Media Convert job. Copy the role name and look it up in IAM. Modify its permissions by adding the right S3 access to the role to your bucket.
If you try it only more time, the output should appear right next to your input file.
In order to be able to read the s3://public/{userIdentityId}/{videoName}/{videoName}{quality}..m3u8 file using the current Amplify.Storage.downloadFile(key: {key}, ...) function in iOS, you'll probably have to attach to the key right path and remove the .mp4 extension. Let me know if you're facing any problems, I'm sorting this out now also.
I have an app that gets the images/videos from the mobile gallery, then uploads one of them to a server,
here are the steps i take, which works fine on Android:
1-get data from mobile storage:
MediaLibrary.getAssetsAsync({
first: 20,
mediaType: [MediaLibrary.MediaType.video, MediaLibrary.MediaType.photo]
})
2-upload to server:
formData.append('images[]', {
uri: localUri,
name: isVideo ? 'untitled.mp4' : 'untitled',//for testing
type: isVideo ? 'video/mp4' : 'image/jpeg'
})
axios.post(`url`, formData, {headers: headers,timeout:999999})
The problem is videos are uploaded as an image (only the first frame of the video), while it gets uploaded successfully on Android, the problem is only present on iOS.
The uri of the retrieved files is as follows:
assets-library://asset/asset.MP4?id=xxx&ext=MP4
Quick notes:
1 - the video is played fine locally using the <Video> component from Expo
2 - i tried using the CameraRoll API, but it gives the same results, and is a little buggy
any help would be appreciated
You can update to expo SDK 36 and you will be able to solve this problem by using localUri returned by MediaLibrary.getAssetInfoAsync
ex.
// get asset id like B84E8479-475C-4727-A4A4-B77AA9980897/L0/001
const info = await MediaLibrary.getAssetInfoAsync(asset.id)
const uri = info.localUri // use this for upload
Reffer this comment on github.
https://github.com/expo/expo/issues/3177#issuecomment-510096711
I'm using react-native-image-picker (^0.28.0) along with rn-fetch-blob (^0.10.15).
It works so far when using a Simulator, but when I use it on real iPhone, the image isn't uploading, it fails to upload with the following error that is being catched by the promise.
"Error: Could not connect to the server."
(Yes, server is up and running)
If you see this, you might think it's a backend issue but other requests work fine on real device, this one is the only having problems. The image request being sent is this one:
{
data: "RNFetchBlob-file:///var/mobile/Containers/Data/Application/843A96A1-0000-40D3-B50F-95D69B94B87A/tmp/5D22283B-2014-4E9E-AC3E-AE677D91A366.jpg"
filename: "IMG_6834.jpg"
name: "pictures"
type: "image/jpeg"
}
The only difference with the simulator device and my iPhone is the data path. Where on simulator is like "RNFetchBlob-file:///Users/marian-mac/Library/Developer/CoreSimulator/Devices/....etc"
Any idea why should be different from the simulator on this? It seems to be sending the same request.
Some extra info, when I preview the image in an Image component, it shows well too. So it seems the path is correct on the real iPhone.
This is the method to upload image
uploadPicture: function(data, token) {
return RNFetchBlob.fetch('POST', Constants.baseUrl + '/picture', {
Authorization: "Bearer " + token,
'Content-Type': 'multipart/form-data;boundary=***BOUNDARY***'
}, data);
},
And this is how I build the picture request array, this.state.images contains the image-picker data.
this.state.images.forEach((image) => {
reqData.push({
data: image.imageFile,
filename: image.fileName.split('.')[0] + '.jpg',
name: 'pictures',
type: image.type
})
});
The problem could be that you are uploading to a non-https url. Had this same issue and the nsAllowArbitraryLoads made it work on simulator and gave error when using it on a real device.
Had to wait until it became https
It does not seem to be the problem with http or https. (mine is http)
I'm having a file on this path:
filepath =/var/mobile/Containers/Data/Application/F8F06A2A-C04D-4B6D-A316-F879E144366B/Documents/test.wav
I tried RNFetchBlob.wrap(filePath) but no use.
So I tried to add this file to the asset of ios project and using RNFetchBlob.wrap(RNFetchBlob.fs.asset('test.wav')). Voila, it works.
As a result, it seems to be the problem with filepath
I have found some search results about using app.makeSingleInstance and using CLI arguments, but it seems that the command has been removed.
Is there any other way to send a string to an already started electron app?
One strategy is to have your external program write to a file that your electron app knows about. Then, your electron app can listen for changes to that file and can read it to get the string:
import fs
fs.watch("shared/path.txt", { persistent: false }, (eventType: string, fileName: string) => {
if (eventType === "change") {
const myString: string = fs.readFileSync(fileName, { encoding: "utf8" });
}
});
I used the synchronous readFileSync for simplicity, but you might want to consider the async version.
Second, you'll need to consider the case where this external app is writing so quickly that maybe the fs.watch callback is triggered only once for two writes. Could you miss a change?
Otherwise, I don't believe there's an Electron-native way of getting this information from an external app. If you were able to start the external app from your Electron app, then you could just do cp.spawn(...) and use its stdout pipe to listen for messages.
If shared memory were a thing in Node, then you could use that, but unfortunately it's not.
Ultimately, the most elegant solution to my particular problem was to add a http api endpoint for the Electron app using koa.
const Koa = require("koa");
const koa = new Koa();
let mainWindow;
function createWindow() {
let startServer = function() {
koa.use(async ctx => {
mainWindow.show();
console.log("text received", ctx.request.query.text);
ctx.body = ctx.request.query.text;
});
koa.listen(3456);
};
}
Now I can easily send texts to Electron from outside the app using the following url:
localhost:3456?text=myText
I have an app written in HTML5, Javascript, css3 using PhoneGap to compile for iOS and Android. It collects survey information and uploads this via Ajax call to online host. It has been working really well until recently the upload code appeared to stop working. WELL NOT QUITE! On the iPad it says successful but in fact nothing ever makes it to the host. This is VERY strange. I've tried re-writing the Ajax call based on articles on here but no luck.
iOS - 6.1.3, PhoneGAP 2.7.0, PhoneGap/Adobe Build used.
This is the upload piece...
function sendToWeb(){
var errorflag = false;
db.transaction(function (tx) {
tx.executeSql("SELECT weburl FROM settings", [], function(tx, results){
var webURL = results.rows.item(0).weburl;
tx.executeSql("SELECT * FROM surveypretransfer WHERE uploaded = '0'",[], function(tx, results){
if (results.rows.length == 0) {
alert("You have no surveys waiting to upload");
} else {
alert("You have " + results.rows.length + " surveys waiting to upload");
for (var i=0; i < results.rows.length; i++) {
var responseURL = webURL + "/feeds/saveinfo.php";
var responseString = results.rows.item(i).responsestring;
var localid = results.rows.item(i).id;
//alert(localid);
$.ajax({
type: 'POST',
data: responseString,
url: responseURL,
timeout: 30000,
success: function(data) {
alert('Success!' + data.join('\n'));
},
error: function(data) {
alert(data.join('\n'));
console.log("Results: " + localid);
alert("Error during Upload. Error is: "+ data.statusText);
}
}); //ajax
}; //for loop
alert("You have successfully uploaded "+ results.rows.length + " survey results");
tx.executeSql("UPDATE surveypretransfer SET uploaded = '1' WHERE uploaded = '0'");
}; //if statement
}); //tx.execute
});
}, errorCB);
}
Neither of the two alerts fire when loaded on iPad. Works fine on Android and has previously worked on iPad so I can't find what has changed.
UPDATE: Appears that this only applies to WiFi only iPads. All the 3G ones I tested were fine. Figure that!
Config.XML contains app id = "com.mydomain.myapp" (as an example)
URL for upload is "http://customer.mydomain.com/feeds/saveinfo.php?..."
Also added line 'access origin="http://mydomain.com" subdomains="true" '
Still no results. Is anyone seeing/having similar issues? Anyone see my mistake?
For iOS you might want to try <access origin="http://*.mydomain.com" />, as iOS is not documented in the PhoneGap API to support the subdomain property.
If that doesn't solve your issues, you will probably want to look into CORS (Cross Origin Resource Sharing). I had issues trying to do a POST request from my app to a local port on iOS. The W3C has a great article on how to enable CORS that will probably help. I know in my case, the system would attempt to do an OPTIONS request first, and if it didn't work, the whole thing would fail.
Another tool that you will probably find useful (if not now, in the future) is Fiddler. You can set up an iPad to proxy through your desktop, and then you will be able to observe all of the requests going to and from the device. This is how I found the OPTIONS request noted above.