File upload in ReactNative and CodeIgniter - react-native

I'm trying to submit form data and upload images from React Native app to CodeIgniter backend server. I'm choosing the images from react-native-image-crop-picker and only the data is sent and saved. But not the image is uploaded. I have tried this using Postman and it works perfectly.
I see that form.append() has 3 parameters. I checked the Postman request code, and it shows like this
data.append("attach_report", fileInput.files[0], "...3539240198157045_n.jpg");
My problem is, what's the datatype of fileInput.files[0] in this? Thanks in advance

Finally I found an answer for this. I have seen that the file returns from react-native-image-crop-picker is almost a File object. So I just edited the file like below.
// image is react-native-image-crop-picker returning file
image.uri = image.path;
image.name = "TEST.jpg";
image.type = image.mime;
image.dateModified = new Date();
Then,
const f = new FormData();
f.append('attach_report', image, image.uri);
f.append('user_id', 1);
Then submit the form. It works in my scenario...

Related

Size of PDF breaks FastAPI using python-multipart?

I am trying to upload a PDF to FastAPI. After turning the PDF into a base64-blob and storing it in a txt-file, I POST this file to FastAPI using Postman.
This is my server-side code:
from fastapi import FastAPI, File, UploadFile
import base64
app = FastAPI()
#app.post("/uploadfile/")
async def create_upload_file(file: UploadFile = File(...)):
contents = await file.read()
blob = base64.b64decode(contents)
pdf = open('result.pdf','wb')
pdf.write(blob)
pdf.close()
return {"filename": file.filename}
This procedure works fine for a single-page PDF document of size 279KB (blob-size: 372KB), but it doesn't for a multi-page document of size 1.8MB (blob-size: 2.4MB).
When I try, I get the following WARNING and a 400 bad request response (along with the reseponse "detail": "There was an error parsing the body"):
"Did not find boundary character 55 at index 2"
I'm sure there must be an explanation for this behavior? Maybe it has something to do with async?
This is most likely an issue with saving the file using open().
For large files pdf.close() will execute before pdf.write() has finished saving all the contents of the file.
In order to ensure the whole file being written before it is closed, use with such as this:
with open('failed.pdf', 'wb') as outfile:
outfile.write(blob)
Using the with you will not need to close() after writing. with should also be considered best practice over saving the file into a local variable.

Google Drive - use WebViewLink vs thumbnailLink

I'm using the Google Drive API where I can gain access to 2 pieces of data that I need to display a jpg file oin my program. WebViewLink is the "large" size image while thumbnailLink is the "thumb" smaller size of the same image.
I'm having an issue with downloading the WebViewLink that I do not have with the thumbnailLink. Part of my code calls either exif_imagetype($filename) or getimagesize($filename) so I can retrieve the type, height & width etc for the $filename. This is successful for the thumbnailView but not the WebViewLink...
code snippet...
$WebViewLink = "https://drive.google.com/a/treering.com/file/d/blablabla";
$type = exif_imagetype($WebViewLink);
--- results in the error
"PHP Warning: exif_imagetype(): stream does not support seeking..."
where as...
$thumbnailLink = "https://lh6.googleusercontent.com/blablabla";
$type = exif_imagetype($thumbnailLink);
--- successful
where $type = 2 // a .jpg file
Not sure what I need to do to gain a usable WebViewLink... maybe use the "export" function to copy to a file on my server that is accessible, then use that exported file for the functions that fail above?
Thanks for any help.
John
I think you are using the wrong property to get the image of the file.
WebViewLink
A link for opening the file in a relevant Google editor or viewer in a browser.
thumbnailLink
A short-lived link to the file's thumbnail, if available. Typically lasts on the order of hours.
You can try using the iconLink():
A static, unauthenticated link to the file's icon.
Sample image of thumbnailLink:
Sample image of a iconLink:
It will still show relevant image about the file.
Hope it helps!

MVC4 - How to upload a file partially (only the first 10 lines, for e.g.)

ASP.NET MVC - Is it possible to upload only the first 10 lines of a file? Basically, we have some files that can range from 1-10GB but the data that we need is present only in the first 10 rows in the file. Using the typical web development approache, we'd upload the whole file to the server and then read the first 10 rows, but uploading a 10GB file just to read a few bytes of data seems a big waste of resources. Is it possible to read such a file without uploading all of it to the webserver?
Solution - FileAPIs slice function solved this problem (thanks to Chris below). The simplified code is below for anyone interested -
var sampleFile = document.getElementById('yourfileelement').files[0];
var reader = new FileReader();
var fileData = sampleFile.slice(0, 500000); //Read top 500000 bytes
reader.onprogress = function (evt) { //Show progressbar etc }
reader.onloadend = function (evt) { alert(evt.target.result); } //evt.target.result contains the file data that was read
reader.readAsText(fileClientReadData);
No, but you may be able to accomplish it using the File API client-side to read and send to the server via AJAX just the first 10 lines. However, note that the File API is only supported in modern browsers, so this won't work with IE 9 or less. You might be able to create a more comprehensive solution using a Flash or Java applet, but ugh.

Not able to get file object Using YUI IN Internext Explorer

I am trying to upload a file using YUI.
Below is my code that works fine in Firefox and Chrome.But not working in IE 8.
this.portlet_view_object.delegate('change', function(e) {
......
var fileField = Y.one('#newcase_file_'+context.imageCount);
var file = fileField._node.files[0];
if(!context.maxFileSize.call(context,file)){
return;
}
....
Here, the maxFileSize, is the method to which i pass the file object and perform operation related to fiel(e.g. fileSize, fileName).
In firefox and chrome, i am getting the file object by fileField._node.files[0];
But the same thing is not working in IE 8,and getting below error.
_node.files.0' is null or not an object
Any suggestions are welcomed.
Thanks.
This issue isn't related to YUI, just to IE.
.files holds multiple selected files, but IE8 does not support this methos and can only select one file. Therefore this property isn't recognized.
You can use this workaround:
if ('files' in fileField._node)
var file = fileField._node.files[0];
else
var file = fileField._node.value;
Or skip the whole .files completely if you want to, although I personally wouldn't recommend it.

Display Default Image

I uploaded image via paperclip so it's uploaded then after I will remove that image manually so now in our table entry is there that image is uploaded but in our system that image is not found. because we remove that image manually. In this case I want to display a default image if image is uploaded on server but not present in server.
My Image is stored in Amazon
Thanks In Advance.
Now, I Fix that issue by using following code
require "net/http"
url = URI.parse( image_path )
req = Net::HTTP.new(url.host, url.port)
begin
res = req.request_head(url.path)
rescue
end
Hope, This will help you in you feature