How to Upload Photos From Computer to Webserver Over the Internet in Php

Learn how to make HTTP Post requests using the ESP32-CAM board with Arduino IDE to send photos to a server. We'll bear witness how to postal service a JPG/JPEG paradigm to a local server (Raspberry Pi LAMP server) or to a deject server (that you tin can access from anywhere). The photos will be displayed in a gallery where you can view or delete the photos. To save the images in the server and create the gallery, nosotros'll use PHP scripts.

To build this project, you need to follow the next steps. Follow the LAMP Server or the Hosting Server instructions depending if yous want to access the photos locally or from anywhere.

1. Hosting your PHP Awarding
   1. Raspberry Pi LAMP Server (local access)
   2. Hosting Server (access from anywhere)
2. PHP scripts to save and display photos in the server
   1. Raspberry Pi LAMP Server (local access)
   2. Hosting Server (access from anywhere)
3. Program the ESP32-CAM with Arduino IDE
4. Testing and Last Demonstration

1. Hosting Your PHP Application

The goal of this project is to have a local or deject server to store and access your ESP32-CAM photos.

i. Raspberry Pi local server:

With a Raspberry Pi LAMP server, you tin access your images locally (every bit illustrated below).

• You can run a LAMP (Linux, Apache, MySQL, PHP) server on a Raspberry Pi to access data in your local network. Raspberry Pi LAMP Server: Local Linux server that you use to access your images locally.

Setup Local RPi LAMP Server »

2. Cloud server (Bluehost hosting solution)

You too can visualize the ESP32-CAM photos from anywhere in the world by accessing your ain server + domain. Hither'southward a high level overview on how it works:

• Bluehost (user-friendly with cPanel): free domain proper name when you sign up for the 3-yr plan. I recommend choosing the unlimited websites option; Note that any hosting service that offers PHP will work with this tutorial. If you lot don't take a hosting account, I recommend signing up for Bluehost.

Go Hosting and Domain Name with Bluehost »

When ownership a hosting account, you'll also accept to purchase a domain name. This is what makes this project interesting: you'll be able to go your domain name (http://example.com) and see your ESP32-CAM photos. If y'all similar our projects, you might consider signing up to Bluehost, considering you'll be supporting our work.

HTTP Postal service Request Method

The Hypertext Transfer Protocol (HTTP) works as a request-response protocol between a customer and server. Here'south an instance:

• The ESP32 (client) submits an HTTP request to a Server (for example: local RPi Lamp Server or example.com);
• The server returns a response to the ESP32 (client);

HTTP POST is used to send information to a server to create/update a resource. For example, publish an prototype to a server.

          Postal service /upload.php HTTP/1.1 Host: case.com Content-Type: image/jpeg        

2.1. Preparing Your .php Files and uploads Folder (Raspberry Pi LAMP Server)

This section prepares your .php files and uploads folder for your Raspberry Pi LAMP Server. If you're using your ain server + domain proper name, skip to the next department.

Having a Raspberry Pi running Apache and PHP, in the Raspberry Pi board last window navigate to the /var/www/html/ directory:

          [electronic mail protected]:~ $ cd /var/www/html/        

Create a new folder called uploads:

          [email protected]:/var/www/html $ mkdir uploads [electronic mail protected]:/var/www/html $ ls uploads        

At the moment, /var/world wide web/html is endemic past root, use the adjacent commands to change to the pi user and give it all permissions so that you can salve photos using a PHP script subsequently.

          sudo chown -R pi:pi /var/www/html chmod -R 777 /var/www/html/        

Finally, create a new upload.php file:

          [email protected]:/var/www/html $ nano upload.php        

This PHP script is responsible for receiving incoming images from the ESP32-CAM, rename the images with a timestamp and store them in the uploads binder. Edit the newly created file (upload.php) and copy the following snippet:

          <?php // Rui Santos // Complete project details at https://RandomNerdTutorials.com/esp32-cam-mail service-paradigm-photograph-server/ // Code Based on this instance: w3schools.com/php/php_file_upload.asp  $target_dir = "uploads/"; $datum = mktime(date('H')+0, appointment('i'), date('s'), date('1000'), date('d'), date('y')); $target_file = $target_dir . date('Y.m.d_H:i:s_', $datum) . basename($_FILES["imageFile"]["name"]); $uploadOk = 1; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));  // Cheque if epitome file is a actual image or fake image if(isset($_POST["submit"])) {   $check = getimagesize($_FILES["imageFile"]["tmp_name"]);   if($check !== imitation) {     echo "File is an image - " . $check["mime"] . ".";     $uploadOk = 1;   }   else {     echo "File is not an image.";     $uploadOk = 0;   } }  // Check if file already exists if (file_exists($target_file)) {   echo "Sorry, file already exists.";   $uploadOk = 0; }  // Check file size if ($_FILES["imageFile"]["size"] > 500000) {   echo "Lamentable, your file is too big.";   $uploadOk = 0; }  // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {   repeat "Deplorable, only JPG, JPEG, PNG & GIF files are allowed.";   $uploadOk = 0; }  // Check if $uploadOk is set to 0 past an fault if ($uploadOk == 0) {   echo "Sorry, your file was non uploaded."; // if everything is ok, attempt to upload file } else {   if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {     echo "The file ". basename( $_FILES["imageFile"]["proper noun"]). " has been uploaded.";   }   else {     echo "Deplorable, there was an error uploading your file.";   } } ?>                  

View raw code

Your upload.php file should look similar this. Save your file and exit (Ctrl+X, Y, and Enter key):

And so, create a new gallery.php file:

          [email protected]:/var/www/html $ nano gallery.php        

Edit the newly created file (gallery.php) and re-create the following snippet:

          <!--    Rui Santos   Complete project details at https://RandomNerdTutorials.com/esp32-cam-post-image-photo-server/      Permission is hereby granted, free of accuse, to any person obtaining a copy   of this software and associated documentation files.      The above copyright discover and this permission observe shall exist included in all   copies or substantial portions of the Software. --> <!DOCTYPE html> <html> <head>   <title>ESP32-CAM Photo Gallery</title>   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <style>     .flex-container {       brandish: flex;       flex-wrap: wrap;     }     .flex-container > div {       text-marshal: center;       margin: 10px;     }   </style> </caput><trunk> <h2>ESP32-CAM Photo Gallery</h2> <?php   // Prototype extensions   $image_extensions = assortment("png","jpg","jpeg","gif");    // Check delete HTTP GET request - remove images   if(isset($_GET["delete"])){     $imageFileType = strtolower(pathinfo($_GET["delete"],PATHINFO_EXTENSION));     if (file_exists($_GET["delete"]) && ($imageFileType == "jpg" ||  $imageFileType == "png" ||  $imageFileType == "jpeg") ) {       echo "File institute and deleted: " .  $_GET["delete"];       unlink($_GET["delete"]);     }     else {       echo 'File not found - <a href="gallery.php">refresh</a>';     }   }   // Target directory   $dir = 'uploads/';   if (is_dir($dir)){     echo '<div class="flex-container">';     $count = one;     $files = scandir($dir);     rsort($files);     foreach ($files every bit $file) {       if ($file != '.' && $file != '..') {?>         <div>           <p><a href="gallery.php?delete=<?php echo $dir . $file; ?>">Delete file</a> - <?php echo $file; ?></p>           <a href="<?php repeat $dir . $file; ?>">             <img src="<?php repeat $dir . $file; ?>" style="width: 350px;" alt="" championship=""/>           </a>        </div> <?php        $count++;       }     }   }   if($count==one) { echo "<p>No images found</p>"; }  ?>   </div> </body> </html>                  

View raw code

This PHP script is responsible for displaying the images on the gallery. Your gallery.php file should wait similar this. Salve your file and exit (Ctrl+X, Y, and Enter key):

2.2. Preparing Your .php Files and uploads Folder (Hosting Service)

If you prefer to run your server remotely and admission the photos from anywhere, yous need a hosting account. After signing up for a hosting account and setting up a domain proper name, you tin can login to your cPanel or similar dashboard. After that, open the File Managing director.

Open the "Advanced" tab and select "File Manager":

And so, select thepublic_html option. Press the "+ File" button to create a new upload.php file and a new gallery.php file. So, click the "+Binder" button to create the Uploads binder.

With the three items created, edit the upload.php file:

This PHP script is responsible for receiving incoming images from the ESP32-CAM, rename the images with a timestamp and store them in the uploads folder. Edit the newly created file (upload.php) and copy the post-obit snippet:

          <?php // Rui Santos // Complete project details at https://RandomNerdTutorials.com/esp32-cam-mail service-prototype-photo-server/ // Code Based on this instance: w3schools.com/php/php_file_upload.asp  $target_dir = "uploads/"; $datum = mktime(engagement('H')+0, date('i'), date('due south'), engagement('1000'), date('d'), date('y')); $target_file = $target_dir . date('Y.one thousand.d_H:i:s_', $datum) . basename($_FILES["imageFile"]["proper name"]); $uploadOk = one; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));  // Check if prototype file is a bodily image or false image if(isset($_POST["submit"])) {   $cheque = getimagesize($_FILES["imageFile"]["tmp_name"]);   if($check !== false) {     echo "File is an image - " . $check["mime"] . ".";     $uploadOk = 1;   }   else {     echo "File is not an image.";     $uploadOk = 0;   } }  // Check if file already exists if (file_exists($target_file)) {   echo "Lamentable, file already exists.";   $uploadOk = 0; }  // Bank check file size if ($_FILES["imageFile"]["size"] > 500000) {   echo "Lamentable, your file is as well large.";   $uploadOk = 0; }  // Allow sure file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) {   echo "Distressing, only JPG, JPEG, PNG & GIF files are allowed.";   $uploadOk = 0; }  // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) {   echo "Deplorable, your file was not uploaded."; // if everything is ok, try to upload file } else {   if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {     echo "The file ". basename( $_FILES["imageFile"]["name"]). " has been uploaded.";   }   else {     echo "Deplorable, there was an mistake uploading your file.";   } } ?>                  

View raw code

Salvage your file and get out.

Then, edit the gallery.php file and copy the following snippet. This is responsible for displaying the images in the gallery.

          <!--    Rui Santos   Complete project details at https://RandomNerdTutorials.com/esp32-cam-post-image-photo-server/      Permission is hereby granted, costless of charge, to any person obtaining a copy   of this software and associated documentation files.      The to a higher place copyright notice and this permission detect shall be included in all   copies or substantial portions of the Software. --> <!DOCTYPE html> <html> <head>   <title>ESP32-CAM Photo Gallery</title>   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <way>     .flex-container {       display: flex;       flex-wrap: wrap;     }     .flex-container > div {       text-align: center;       margin: 10px;     }   </style> </head><body> <h2>ESP32-CAM Photo Gallery</h2> <?php   // Prototype extensions   $image_extensions = array("png","jpg","jpeg","gif");    // Check delete HTTP Become asking - remove images   if(isset($_GET["delete"])){     $imageFileType = strtolower(pathinfo($_GET["delete"],PATHINFO_EXTENSION));     if (file_exists($_GET["delete"]) && ($imageFileType == "jpg" ||  $imageFileType == "png" ||  $imageFileType == "jpeg") ) {       repeat "File institute and deleted: " .  $_GET["delete"];       unlink($_GET["delete"]);     }     else {       echo 'File not establish - <a href="gallery.php">refresh</a>';     }   }   // Target directory   $dir = 'uploads/';   if (is_dir($dir)){     echo '<div class="flex-container">';     $count = ane;     $files = scandir($dir);     rsort($files);     foreach ($files equally $file) {       if ($file != '.' && $file != '..') {?>         <div>           <p><a href="gallery.php?delete=<?php repeat $dir . $file; ?>">Delete file</a> - <?php repeat $file; ?></p>           <a href="<?php repeat $dir . $file; ?>">             <img src="<?php echo $dir . $file; ?>" mode="width: 350px;" alt="" title=""/>           </a>        </div> <?php        $count++;       }     }   }   if($count==1) { echo "<p>No images institute</p>"; }  ?>   </div> </body> </html>                  

View raw lawmaking

Relieve your file and exit. That'southward information technology! Your server is ready.

3. ESP32-CAM HTTP Post Images/Photos to Server

Now that you have your server set up (Raspberry Pi LAMP server or deject server), it's time to prepare the ESP32-CAM with the code to publish a new image to your server every 30 seconds. Before proceeding with this tutorial, brand sure y'all complete the post-obit prerequisites.

Parts Required

To follow this tutorial you lot demand the post-obit components:

• ESP32-CAM with OV2640 – read All-time ESP32-CAM Dev Boards
• FTDI programmer
• Female-to-female jumper wires
• 5V ability supply for ESP32-CAM
• Local server:
  • Raspberry Pi Board  – read All-time Raspberry Pi Starter Kits
  • MicroSD Menu – 32GB Class10
  • Raspberry Pi Ability Supply (5V 2.5A)
• Cloud server (alternative): Bluehost

You tin use the preceding links or get directly to MakerAdvisor.com/tools to find all the parts for your projects at the all-time price!

Arduino IDE

We'll program the ESP32-CAM using Arduino IDE, and then make certain you have the ESP32 add-on installed.

• Installing the ESP32 Board in Arduino IDE (Windows, Mac Os Ten, Linux)

Check the PHP URL

You should try to open the Raspberry Pi local IP address or your external example.com domain proper noun, followed by /upload.php that should return:

          Lamentable, only JPG, JPEG, PNG & GIF files are allowed.Sorry, your file was not uploaded.        

If you lot see that message save your URL/domain name and path, your server should exist ready and you can continue with this guide.

Additionally, endeavour to access the /gallery.php path. You should get something as shown beneath:

ESP32-CAM Code

The next sketch posts the image to a server using HTTP Postal service. Copy the lawmaking below to your Arduino IDE.

          /*   Rui Santos   Consummate project details at https://RandomNerdTutorials.com/esp32-cam-postal service-prototype-photo-server/      Permission is hereby granted, free of charge, to any person obtaining a copy   of this software and associated documentation files.      The above copyright notice and this permission observe shall be included in all   copies or substantial portions of the Software. */  #include <Arduino.h> #include <WiFi.h> #include "soc/soc.h" #include "soc/rtc_cntl_reg.h" #include "esp_camera.h"  const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD";  String serverName = "192.168.1.XXX";   // REPLACE WITH YOUR Raspberry Pi IP ADDRESS //Cord serverName = "example.com";   // OR REPLACE WITH YOUR DOMAIN NAME  String serverPath = "/upload.php";     // The default serverPath should be upload.php  const int serverPort = 80;  WiFiClient customer;  // CAMERA_MODEL_AI_THINKER #ascertain PWDN_GPIO_NUM     32 #ascertain RESET_GPIO_NUM    -i #define XCLK_GPIO_NUM      0 #define SIOD_GPIO_NUM     26 #define SIOC_GPIO_NUM     27  #define Y9_GPIO_NUM       35 #define Y8_GPIO_NUM       34 #define Y7_GPIO_NUM       39 #define Y6_GPIO_NUM       36 #define Y5_GPIO_NUM       21 #define Y4_GPIO_NUM       nineteen #define Y3_GPIO_NUM       eighteen #define Y2_GPIO_NUM        5 #define VSYNC_GPIO_NUM    25 #define HREF_GPIO_NUM     23 #ascertain PCLK_GPIO_NUM     22  const int timerInterval = 30000;    // time between each HTTP Mail image unsigned long previousMillis = 0;   // last time image was sent  void setup() {   WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0);    Serial.begin(115200);    WiFi.mode(WIFI_STA);   Serial.println();   Serial.print("Connecting to ");   Serial.println(ssid);   WiFi.brainstorm(ssid, password);     while (WiFi.condition() != WL_CONNECTED) {     Serial.print(".");     delay(500);   }   Serial.println();   Serial.print("ESP32-CAM IP Address: ");   Serial.println(WiFi.localIP());    camera_config_t config;   config.ledc_channel = LEDC_CHANNEL_0;   config.ledc_timer = LEDC_TIMER_0;   config.pin_d0 = Y2_GPIO_NUM;   config.pin_d1 = Y3_GPIO_NUM;   config.pin_d2 = Y4_GPIO_NUM;   config.pin_d3 = Y5_GPIO_NUM;   config.pin_d4 = Y6_GPIO_NUM;   config.pin_d5 = Y7_GPIO_NUM;   config.pin_d6 = Y8_GPIO_NUM;   config.pin_d7 = Y9_GPIO_NUM;   config.pin_xclk = XCLK_GPIO_NUM;   config.pin_pclk = PCLK_GPIO_NUM;   config.pin_vsync = VSYNC_GPIO_NUM;   config.pin_href = HREF_GPIO_NUM;   config.pin_sscb_sda = SIOD_GPIO_NUM;   config.pin_sscb_scl = SIOC_GPIO_NUM;   config.pin_pwdn = PWDN_GPIO_NUM;   config.pin_reset = RESET_GPIO_NUM;   config.xclk_freq_hz = 20000000;   config.pixel_format = PIXFORMAT_JPEG;    // init with loftier specs to pre-classify larger buffers   if(psramFound()){     config.frame_size = FRAMESIZE_SVGA;     config.jpeg_quality = x;  //0-63 lower number means higher quality     config.fb_count = 2;   } else {     config.frame_size = FRAMESIZE_CIF;     config.jpeg_quality = 12;  //0-63 lower number means higher quality     config.fb_count = 1;   }      // photographic camera init   esp_err_t err = esp_camera_init(&config);   if (err != ESP_OK) {     Serial.printf("Photographic camera init failed with error 0x%x", err);     delay(1000);     ESP.restart();   }    sendPhoto();  }  void loop() {   unsigned long currentMillis = millis();   if (currentMillis - previousMillis >= timerInterval) {     sendPhoto();     previousMillis = currentMillis;   } }  String sendPhoto() {   String getAll;   String getBody;    camera_fb_t * fb = NULL;   fb = esp_camera_fb_get();   if(!fb) {     Series.println("Photographic camera capture failed");     delay(1000);     ESP.restart();   }      Series.println("Connecting to server: " + serverName);    if (client.connect(serverName.c_str(), serverPort)) {     Serial.println("Connection successful!");         Cord caput = "--RandomNerdTutorials\r\nContent-Disposition: form-data; name=\"imageFile\"; filename=\"esp32-cam.jpg\"\r\nContent-Type: image/jpeg\r\n\r\north";     Cord tail = "\r\n--RandomNerdTutorials--\r\n";      uint32_t imageLen = fb->len;     uint32_t extraLen = head.length() + tail.length();     uint32_t totalLen = imageLen + extraLen;        client.println("Postal service " + serverPath + " HTTP/1.i");     client.println("Host: " + serverName);     customer.println("Content-Length: " + Cord(totalLen));     customer.println("Content-Blazon: multipart/class-information; boundary=RandomNerdTutorials");     customer.println();     customer.print(head);        uint8_t *fbBuf = fb->buf;     size_t fbLen = fb->len;     for (size_t n=0; due north<fbLen; northward=n+1024) {       if (n+1024 < fbLen) {         client.write(fbBuf, 1024);         fbBuf += 1024;       }       else if (fbLen%1024>0) {         size_t remainder = fbLen%1024;         client.write(fbBuf, residuum);       }     }        client.print(tail);          esp_camera_fb_return(fb);          int timoutTimer = 10000;     long startTimer = millis();     boolean country = simulated;          while ((startTimer + timoutTimer) > millis()) {       Serial.print(".");       filibuster(100);             while (client.bachelor()) {         char c = client.read();         if (c == '\northward') {           if (getAll.length()==0) { state=truthful; }           getAll = "";         }         else if (c != '\r') { getAll += String(c); }         if (state==true) { getBody += Cord(c); }         startTimer = millis();       }       if (getBody.length()>0) { intermission; }     }     Serial.println();     client.stop();     Serial.println(getBody);   }   else {     getBody = "Connection to " + serverName +  " failed.";     Serial.println(getBody);   }   return getBody; }                  

View raw lawmaking

Before uploading the code, you need to insert your network credentials in the following variables:

          const char* ssid = "REPLACE_WITH_YOUR_SSID"; const char* password = "REPLACE_WITH_YOUR_PASSWORD";        

Make sure you lot select the correct camera module. In this case, we're using the AI-THINKER Model. If you're using another camera model, you can read this Guide ESP32-CAM Camera Boards: Pin and GPIOs Assignment.

Add your Raspberry Pi IP address or employ the server domain name:

          String serverName = "192.168.one.XXX";   // Supervene upon WITH YOUR Raspberry Pi IP Accost //String serverName = "instance.com";   // OR REPLACE WITH YOUR DOMAIN NAME Cord serverPath = "/upload.php";     // The default serverPath should be upload.php        

Upload Lawmaking to ESP32-CAM

Now you tin can upload the code to your ESP32-CAM board. Connect the ESP32-CAM board to your computer using an FTDI developer.

Follow the adjacent schematic diagram:

Many FTDI programmers have a jumper that allows you to select 3.3V or 5V. Make certain the jumper is in the correct place to select 5V.

Important: GPIO 0 needs to exist connected to GND and then that you're able to upload code.

ESP32-CAM	FTDI Programmer
GND	GND
5V	VCC (5V)
U0R	TX
U0T	RX
GPIO 0	GND

To upload the lawmaking, follow the next steps:

1. Go to Tools > Board and select AI-Thinker ESP32-CAM.
2. Go to Tools > Port and select the COM port the ESP32 is connected to.
3. Then, click the upload push button to upload the code.
4. When you start to encounter these dots on the debugging window as shown below, press the ESP32-CAM on-lath RST button.

Subsequently a few seconds, the lawmaking should exist successfully uploaded to your board.

If you have troubles uploading the code, read our ESP32-CAM Troubleshooting Guide.

How the Code Works

Here'southward a quick explanation on how the code works:

• Imports all libraries;
• Defines the needed variables;
• Defines the camera pins;
• In the setup() you plant a Wi-Fi connection and initialize the ESP32 photographic camera.
• The loop() has a timer that calls the sendPhoto() function every 30 seconds. You lot tin can change that delay time in the timerInterval variable.

The sendPhoto() role is the part that actually takes a photo and sends it to your server. You can use that function in other of your projects that require taking and publishing a photo to a server.

4. Testing and Final Demonstration

After uploading the code to your lath, open the Arduino IDE Serial Monitor and you should see a similar message beingness printed every 30 seconds:

          The file esp32-cam.jpg has been uploaded.        

If yous go to your local server URL http://IP-Accost/uploads, or to your cloud server URL http://instance.com/uploads you should accept a folder with all your stored photos.

You can open up each link to open up a new page with the total image:

Now, if you lot become to your local server URL http://IP-Address/gallery.php, or to your deject server URL http://example.com/gallery.php, you tin access the gallery folio, where y'all can view and delete the photos.

To delete whatever photo, just click on the "Delete file" link next to each prototype.

Wrapping Up

That's it! At present, you can send your ESP32-CAM photos to whatever server using HTTP POST. Modify this project to best suit your needs, for example have a photo and send to a server when motion is detected.

Other ESP32 tutorials you might be interested in:

• ESP32 HTTP Go and HTTP POST
• ESP32 HTTP Go Web APIs
• ESP32 HTTP POST Spider web APIs

Learn more than most the ESP32-CAM:

• Build ESP32-CAM Projects using Arduino IDE eBook
• More than ESP32-CAM projects …

Thanks for reading.

kneppertede1971.blogspot.com

Source: https://randomnerdtutorials.com/esp32-cam-post-image-photo-server/

Share this post