Skip to table dataSkip to menuSkip to searchHotkeys reference
The 4 files below (fileuploader.htm, fileuploader.css, transfer1.php, and transfer2.php) demonstrate how to POST data and files
from an HTML form to a FileMaker database by using the FileMaker DATA API.

The fileuploader.htm file and fileuploader.css render a responsive form that gathers user input and file selection and then uploads 
the file to a PHP-equipped web server using transfer1.php, which then calculates the newly-uploaded file's URL and passes the POST'ed 
data and file URL to transfer2.php, which resides in "transfersecure", a password-protected directory.

The transfer2.php script re-packages the POST variables into the format required by the FMP DATA API and then logs in to the FileMaker
DATA API-enabled database, creates a new record, and then runs a parameterized script named "InsertUploadedFileFromURL" that receives the 
Token (a unique identifier) as the parameter and then uses it in a Find request to isolate the newly-created record and then insert the 
uploaded file into the "File" container field using the FileURL value and an Insert From URL script step.

It then deletes the uploaded file from the web server and transfers control back to transfer1.php, which e-mails a receipt to the 
POST-ed "E-mail" address containing the form's POST-ed variables and then reloads the fileuploader.htm form.

The FMP DATA API-enabled database used in this example requires the following 14 text fields on the FMP DATA API-enabled layout..
"UserName", "Email", "Country", "Instructions", "Activate", "Language", "Vehicle1", "Vehicle2", "Vehicle3", "Cars", "Color", "Birthday",
"FileURL", and "Token" as well as a container field name "File".

The path on the web server to fileuploader.htm is "https://yourwebserver.com/transfer/fileuploader.htm"
The path on the web server to fileuploader.css is "https://yourwebserver.com/transfer/fileuploader.css"
The path on the web server to transfer1.php is "https://yourwebserver.com/transfer/transfer1.php"
The path on the web server to the uploads directory is "https://yourwebserver.com/transfer/uploads/"
The path on the web server to transfer2.php is "https://yourwebserver.com/transfersecure/transfer2.php"

You need to change "yourwebserver.com" to reference your PHP-equipped web server (this example uses a 2mhost SSL-enabled LiteSpeed server).
You need to change "securefolderusername" and "securefolderuserpassword" to the log-in credentials for your secure folder.
You need to change "a12345" to reference your FMP DATA API-enabled server (this example uses a database hosted by fmphost.com).
You need to change "filemakeruserwithAPIenabledaccount" to the name of an FMP DATA API-enabled account.
You need to change "filemakeruserwithAPIenabledaccountpassword" to the password of an FMP DATA API-enabled account.
You need to change "yourfilemakerdatabasename" to the name of the FMP DATA API-enabled database.
You need to change "yourfilemakerdatabaselayoutname" to the name of the FMP DATA API-enabled layout.

//Double slashes comment out single lines, /* and */ comment out multiple lines. Add or remove comments to enable script sections.
Un-comment the "/* Add file upload restrictions" section in transfer1.php to add upload restrictions, currently uploads files of all types.

_____________________________________________________________________________________________

The fileuploader.htm form

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fileuploader.css" type="text/css" />
</head>
<title>File Transfer Form</title>
<body>
<form name ="FileTransferForm" action="transfer1.php" method="post" enctype="multipart/form-data">
  <label for="UserName">UserName:</label><br>
  <input type="text" id="UserName" name="UserName" value=""><br>
  <label for="Email">Email:</label><br>
  <input type="text" id="Email" name="Email" value=""><br>
  <label for="Country">Country:</label><br>
  <input type="text" id="Country" name="Country" value=""><br> 
  <label for="Instructions">Instructions:</label><br>
  <input type="text" id="Instructions" name="Instructions" value=""><br>  
  <label for="Activate">Activate:</label><br>
  <input type="text" id="Activate" name="Activate" value=""><br><br> 
  <label class="container0">JavaScript<input type="radio" checked="checked" id="javascript" name="Language" value="JavaScript">
  <span class="checkmark0"></span></label>
  <label class="container0">HTML<input type="radio" id="html" name="Language" value="HTML">
  <span class="checkmark0"></span></label>  
  <label class="container0">CSS<input type="radio" id="css" name="Language" value="CSS">
  <span class="checkmark0"></span></label> 
  <label class="container0">PHP<input type="radio" id="css" name="Language" value="PHP">
  <span class="checkmark0"></span></label><br><br>
  <label class="container1">Bike<input type="checkbox" checked="checked" id="vehicle1" name="Vehicle1" value="Bike">
  <span class="checkmark1"></span></label>
  <label class="container1">Car<input type="checkbox" id="vehicle2" name="Vehicle2" value="Car">
  <span class="checkmark1"></span></label>
  <label class="container1">Boat<input type="checkbox" id="vehicle3" name="Vehicle3" value="Boat">
  <span class="checkmark1"></span></label><br><br>
  <label for="birthday">Select a Date:</label><br>
  <input type="date" id="birthday" name="Birthday"><br><br> <br><br>
  <label for="favcolor">Select a Color:</label><br><br>
  <input type="color" id="favcolor" name="Color" value="#ff0000">  <br><br>
  <label for="cars">Select a Car:</label><br><br>
  <div class="select">
  <select id="cars" name="Cars">
  <option></option>
  <option value="Volvo">Volvo</option>
  <option value="Saab">Saab</option>
  <option value="Fiat">Fiat</option>
  <option value="Audi">Audi</option>
  <option value="Porsche">Porsche</option>
  <option value="Ferrari">Ferrari</option>
  </select>
  </div><br><br>  
  <label for="fileToUpload">Select a File:</label><br>
  <input type="file" class="custom-file-input" name="fileToUpload" id="fileToUpload"><br><br>
  <input type="submit" value="Submit" name="submit">
</form>
</body>
</html>

_____________________________________________________________________________________________

The fileuploader.css stylesheet

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
input[type=date] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
} 
input[type=file] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
input[type=color] {
  width: 100%;
  padding: 0px 0px;
  margin: 0px 0;
  box-sizing: border-box;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #2196F4;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  width: 100%;
}
.container0 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container0 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkmark0 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
.container0:hover input ~ .checkmark0 {
  background-color: #ccc;
}
.container0 input:checked ~ .checkmark0 {
  background-color: #2196F3;
}
.checkmark0:after {
  content: "";
  position: absolute;
  display: none;
}
.container0 input:checked ~ .checkmark0:after {
  display: block;
}
.container0 .checkmark0:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
.container1 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.container1:hover input ~ .checkmark1 {
  background-color: #ccc;
}
.container1 input:checked ~ .checkmark1 {
  background-color: #2196F3;
}
.checkmark1:after {
  content: "";
  position: absolute;
  display: none;
}
.container1 input:checked ~ .checkmark1:after {
  display: block;
}
.container1 .checkmark1:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    background: #2196F4;
    background-image: none;
    border:1px solid black;
}
.select {
    position: relative;
    display: block;
    width: 20em;
    height: 3em;
    line-height: 3;
    background: #2C3E50;
    overflow: hidden;
    border-radius: .25em;
}
select {
    width: 90%;
    height: 100%;
    margin: 0;
    padding: 0 0 0 .5em;
    color: #fff;
    cursor: pointer;
}
select::-ms-expand {
    display: none;
} 
.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 1em;
    background: #34495E;
    pointer-events: none;
}
.select:hover::after {
    color: #F39C12;
}
.select::after {
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Click here to select a file to upload...';
  display: inline-block;
  background: #2196F4;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 24px 28px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 0px 0px #000;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

_____________________________________________________________________________________________

The transfer1.php file

<?php
$referer = "https://yourwebserver.com/transfer/fileuploader.htm";
if ($_SERVER['HTTP_REFERER'] != $referer) {die("Have a nice day.");}
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

/* Add file upload restrictions
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

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;
	exit();
  }
}
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
  exit();
}
if ($_FILES["fileToUpload"]["size"] > 5000000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
  exit();
}
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
  exit();
}

if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
  exit();
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    $filename = htmlspecialchars( basename( $_FILES["fileToUpload"]["name"]));
  } else {
    echo "Sorry, there was an error uploading your file.";
	exit();
  }
}

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    $filename = htmlspecialchars( basename( $_FILES["fileToUpload"]["name"]));
  } else {
    echo "Sorry, there was an error uploading your file.";
	exit();
}
*/

$UserName = $_POST["UserName"];
$Email = $_POST["Email"];
$Country = $_POST["Country"];
$Instructions = $_POST["Instructions"];
$Activate = $_POST["Activate"];
$Language = $_POST["Language"];
$Vehicle1 = $_POST["Vehicle1"];
$Vehicle2 = $_POST["Vehicle2"];
$Vehicle3 = $_POST["Vehicle3"];
$Cars = $_POST["Cars"];
$Color = $_POST["Color"];
$Birthday = $_POST["Birthday"];
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file); 
$filename = htmlspecialchars( basename( $_FILES["fileToUpload"]["name"]));
$fileurl = 'https://yourwebserver.com/transfer/uploads/'.$filename;
$url = 'https://yourwebserver.com/transfersecure/transfer2.php';
$username = 'securefolderusername';
$password = 'securefolderuserpassword';
$headers = array(
    'Content-Type: multipart/form-data',
    'Authorization: Basic '. base64_encode("$username:$password")
	);
$postRequest = array(
    'UserName' => $UserName,
    'Email' => $Email,
	'Country' => $Country,
	'Instructions' => $Instructions,
	'Activate' => $Activate,
	'Language' => $Language,
	'Vehicle1' => $Vehicle1,
	'Vehicle2' => $Vehicle2,
	'Vehicle3' => $Vehicle3,	
	'Cars' => $Cars,	
	'Color' => $Color,
	'Birthday' => $Birthday,
	'FileURL' => $fileurl,
	'TargetFile' => $_SERVER['DOCUMENT_ROOT']."/transfer/".$target_file
	);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postRequest);
curl_exec($ch);	
curl_close($ch);
date_default_timezone_set('America/Los_Angeles');
$date = date_create();
$timestamp = date_timestamp_get($date);
$today = date("F j, Y, g:i a");
$to = $Email;
$subject = "File Transfer Receipt - ".$today." - ".$timestamp;
$txt = $UserName." - ".$Email." - ".$Country." - ".$Instructions." - ".$Activate." - ".$Language." - ".$Vehicle1." - ".$Vehicle2." - ".$Vehicle3." - ".$Cars." - ".$Color." - ".$Birthday." - ".$filename;
$headers = "From: processor@yourwebserver.com";
mail($to,$subject,$txt,$headers);
header( "refresh:5;url=https://yourwebserver.com/transfer/fileuploader.htm" );
echo "<h1 style=\"text-align:center;\">Thanks for submitting.</h1>
<p style=\"text-align:center;\">We'll get back with you ASAP.</p>";
?>

_____________________________________________________________________________________________

The transfer2.php file

<?php
function get_token($host,$username,$password,$payloadName) {
	$additionalHeaders = '';
	$ch = curl_init($host);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', $additionalHeaders));
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_USERPWD, $username . ":" . $password);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $payloadName);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$result = curl_exec($ch); 
	curl_close($ch); 
	$json_token = json_decode($result, true);
	$token_received = $json_token['response']['token'];
	return($token_received);
};

function get_data($host,$token,$payloadName) {	
	$additionalHeaders = "Authorization: Bearer ".$token;
	$ch = curl_init($host);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json' , $additionalHeaders ));
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	curl_setopt($ch, CURLOPT_POST, 1); 
	curl_setopt($ch, CURLOPT_POSTFIELDS, $payloadName);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$result = curl_exec($ch); 
	curl_close($ch);
	$json_data = json_decode($result);
	return $json_data;
};

function run_script($host,$token,$payloadName) {	
	$additionalHeaders = "Authorization: Bearer ".$token;
	$ch = curl_init($host);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json' , $additionalHeaders ));
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$result = curl_exec($ch); 
	curl_close($ch);
	$json_data = json_decode($result);
	return $json_data;
};

function set_data($host,$token,$payloadName) {	
	$additionalHeaders = "Authorization: Bearer ".$token;
	$ch = curl_init($host);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json' , $additionalHeaders ));
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $payloadName);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$result = curl_exec($ch); 
	curl_close($ch);
	$json_data = json_decode($result);
	return $json_data;
};

function delete_token($host) {
    $additionalHeaders = '';
    $payloadName = '';
    $ch = curl_init($host);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', $additionalHeaders));
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
    curl_setopt($ch, CURLOPT_POSTFIELDS, $payloadName);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $result = curl_exec($ch);
    curl_close($ch);
    return($result);
};

$host = 'https://a123456.fmphost.com/fmi/data/vLatest/databases/yourfilemakerdatabasename/sessions/';
$username = 'filemakeruserwithAPIenabledaccount';
$password = 'filemakeruserwithAPIenabledaccountpassword';
$payloadName = '';
$token = get_token($host,$username,$password,$payloadName);
$UserName = $_POST["UserName"];
$Email = $_POST["Email"];
$Country = $_POST["Country"];
$Instructions = $_POST["Instructions"];
$Activate = $_POST["Activate"];
$Language = $_POST["Language"];
$Vehicle1 = $_POST["Vehicle1"];
$Vehicle2 = $_POST["Vehicle2"];
$Vehicle3 = $_POST["Vehicle3"];
$Cars = $_POST["Cars"];
$Color = $_POST["Color"];
$Birthday = $_POST["Birthday"];
$fileurl = $_POST["FileURL"];
$target_file = $_POST["TargetFile"];
$postdata = "{\"fieldData\":{\"FileURL\":\"".$fileurl."\",\"Token\":\"".$token."\",\"UserName\":\"".$UserName."\",\"Email\":\"".$Email."\",\"Country\":\"".$Country."\",\"Instructions\":\"".$Instructions."\",\"Activate\":\"".$Activate."\",\"Language\":\"".$Language."\",\"Vehicle1\":\"".$Vehicle1."\",\"Vehicle2\":\"".$Vehicle2."\",\"Vehicle3\":\"".$Vehicle3."\",\"Color\":\"".$Color."\",\"Birthday\":\"".$Birthday."\",\"Cars\":\"".$Cars."\"}}";
$host = 'https://a123456.fmphost.com/fmi/data/vLatest/databases/yourfilemakerdatabasename/layouts/yourfilemakerdatabaselayoutname/records/';
$request = set_data($host,$token,$postdata);	
$scriptParameters = urlencode($token);
$host = 'https://a123456.fmphost.com/fmi/data/vLatest/databases/yourfilemakerdatabasename/layouts/yourfilemakerdatabaselayoutname/script/InsertUploadedImageFromURL?script.param='.$scriptParameters;
$request = run_script($host,$token,$payloadName);
unlink($target_file);
$host = 'https://a123456.fmphost.com/fmi/data/vLatest/databases/yourfilemakerdatabasename/sessions/'.$token;
$token_deleted = delete_token($host);
?>