HtmlViewer Upload?

Hello, it’s possibly to upload a file in the htmlviewer? For example, i am in webpage and i need to upload a file. So in the page there’s a button that said “Select File” so i press there. But the problem is that don’t appear the window of the finder for select the file. Do you understand? Thanks in advance.

Yes, but you will need to capture the file using the cancel event, and use an HTTPSocket to POST the data to a specified URL.

You will need to tailor the following code to fit your need. It’s straight from the Xojo Developer’s Library at

dim HttpPostaBild as new HTTPSocket
dim rawdata as string
dim LStrReturnData as string
dim nl,data as string
dim bin_data as BinaryStream

dim pdf_name_orig as string = localfolderitem.Name

bin_data = localfolderitem.OpenAsBinaryFile
rawdata = bin_data.Read(localfolderitem.Length)

Const boundary = "--------0xKhTmLbOuNdArY"

nl = chr(13) + chr(10)

// Step 1: Initialize data string

// start with boundary line
data="--" + boundary + nl

// Step 2: Add each of the text-based form fields
// as a separate MIME part, followed by a boundary

data = data + "Content-Disposition: form-data; name=""PHPSESSID""" + nl + nl + dbfDataBase.dbfweb_session + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl


data = data + "Content-Disposition: form-data; name=""me_idnr""" + nl + nl + str(me.idnr) + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl


data = data + "Content-Disposition: form-data; name=""ext_id""" + nl + nl + str(ext_id) + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl

data = data + "Content-Disposition: form-data; name=""field_name""" + nl + nl + self.Name + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl

data = data + "Content-Disposition: form-data; name=""ext_tabell""" + nl + nl + me.ext_tabell + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl

// Now the file name of the first image
data = data + "Content-Disposition: form-data; name=""userfile""" + nl + nl + localfolderitem.Name + nl

// boundary to separate the above from the next part
data = data + "--" + boundary + nl

// Next comes the actual file itself, with headers indicating what type it is
// and what content type we're using (raw binary in this case)

data = data + "Content-Disposition: form-data; name=""userfile""; filename=""" +  localfolderitem.Name + """" + nl + "Content-Type: image/jpeg" + nl + "Content-Length: " + str(lenb(rawdata)) + nl + "Content-Transfer-Encoding: binary" + nl + nl + rawdata + nl


// Now our closing boundary marker, and our data is ready to send
data = data + "--" + boundary + nl + nl
//whew...

HttpPostaBild.SetPostContent data, "multipart/form-data, boundary=" + boundary

It would almost be easier to load a page from a server if using the HTMLViewer, that already handles the file input and upload. The provided method will work, but can also work without an HTMLViewer; using the code, you could even just remove the HTMLViewer and use a TextField and a button, along with GetOpenFolderItem :slight_smile:

If you have a server, where the file will be uploaded, you could use the following HTML and PHP code to handle all the file upload protocol, and skip that part in Xojo :slight_smile:

HTML: upload.html

[code]

Select image to upload: [/code]

PHP: upload.php

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
?>

Both files will need to reside in the same directory, along with another folder in the same directory named “uploads”, with permissions set to 777 (Read/Write/Execute). The included example can even test filetypes (image in the example).

Thank you so much! i will test and i tell you.

[quote=208976:@Matthew Combatti]Yes, but you will need to capture the file using the cancel event, and use an HTTPSocket to POST the data to a specified URL.

You will need to tailor the following code to fit your need. It’s straight from the Xojo Developer’s Library at http://www.xojodevspot.com.

[code]
dim HttpPostaBild as new HTTPSocket
dim rawdata as string
dim LStrReturnData as string
dim nl,data as string
dim bin_data as BinaryStream

dim pdf_name_orig as string = localfolderitem.Name

bin_data = localfolderitem.OpenAsBinaryFile
rawdata = bin_data.Read(localfolderitem.Length)

Const boundary = “--------0xKhTmLbOuNdArY”

nl = chr(13) + chr(10)

// Step 1: Initialize data string

// start with boundary line
data="–" + boundary + nl

// Step 2: Add each of the text-based form fields
// as a separate MIME part, followed by a boundary

data = data + “Content-Disposition: form-data; name=”“PHPSESSID”"" + nl + nl + dbfDataBase.dbfweb_session + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

data = data + “Content-Disposition: form-data; name=”“me_idnr”"" + nl + nl + str(me.idnr) + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

data = data + “Content-Disposition: form-data; name=”“ext_id”"" + nl + nl + str(ext_id) + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

data = data + “Content-Disposition: form-data; name=”“field_name”"" + nl + nl + self.Name + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

data = data + “Content-Disposition: form-data; name=”“ext_tabell”"" + nl + nl + me.ext_tabell + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

// Now the file name of the first image
data = data + “Content-Disposition: form-data; name=”“userfile”"" + nl + nl + localfolderitem.Name + nl

// boundary to separate the above from the next part
data = data + “–” + boundary + nl

// Next comes the actual file itself, with headers indicating what type it is
// and what content type we're using (raw binary in this case)

data = data + “Content-Disposition: form-data; name=”“userfile”"; filename=""" + localfolderitem.Name + “”"" + nl + “Content-Type: image/jpeg” + nl + "Content-Length: " + str(lenb(rawdata)) + nl + “Content-Transfer-Encoding: binary” + nl + nl + rawdata + nl

// Now our closing boundary marker, and our data is ready to send
data = data + “–” + boundary + nl + nl
//whew…

HttpPostaBild.SetPostContent data, “multipart/form-data, boundary=” + boundary

[/code][/quote]
A question, were do you get the code? In what part of the webpage?