title: How can I upload a webcam snapshot with a given name in my form?
body: <p>I have this plugin that takes a snapshot and upload the jpg to the server. Now, I'm using the function date('YmdHis') . '.jpg' to name the file. But I would like to give the filename at my html file. I have 4 files: TEST.HTLM with my html, WEBCAM.JS with some JS and TEST.PHP with the server functions. I have webcam.swf file that pass the picture to the TEST.PHP. </p>
  
  <p>Thank you so much!</p>
  
  <p>Here are my code:</p>
  
  <p>TEST.HTML</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
             "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
          &lt;html lang="en"&gt;
  
          &lt;body&gt;
              &lt;table&gt;&lt;tr&gt;&lt;td valign=top&gt;
              &lt;h1&gt;WEB CAM Test Page&lt;/h1&gt;
  
              NAME:&lt;input id="name"&gt;&lt;BR&gt;
  
              &lt;!-- First, include the JPEGCam JavaScript Library --&gt;
              &lt;script type="text/javascript" src="webcam.js"&gt;&lt;/script&gt;
  
              &lt;!-- Configure a few settings --&gt;
              &lt;script language="JavaScript"&gt;
                  webcam.set_api_url( 'test.php' );
                  webcam.set_quality( 90 ); // JPEG quality (1 - 100)
                  webcam.set_shutter_sound( false ); // play shutter click sound
              &lt;/script&gt;
  
              &lt;!-- Next, write the movie to the page at 400x400 --&gt;
              &lt;script language="JavaScript"&gt;
                  document.write( webcam.get_html(400, 400) );
              &lt;/script&gt;
  
              &lt;!-- Some buttons for controlling things --&gt;
              &lt;br/&gt;&lt;form&gt;
                  &lt;input type=button value="Capturar Foto" onClick="capturarFoto();"&gt;
              &lt;/form&gt;
              &lt;script&gt;
              &lt;!-- this function check if the user have already give a name to the span he is about to take --!&gt;
              function capturarFoto(){
                  if(document.getElementById("name").value != ""){
                      take_snapshot();
                  }else{
                      alert("Please, name the photo before you take it.");
                  }
              }
              &lt;/script&gt;
              &lt;!-- Code to handle the server response (see test.php) --&gt;
              &lt;script language="JavaScript"&gt;
                  webcam.set_hook( 'onComplete', 'my_completion_handler' );
  
                  function take_snapshot() {
                      // take snapshot and upload to server
                      document.getElementById('upload_results').innerHTML = '&lt;h1&gt;Uploading...&lt;/h1&gt;';
                      webcam.snap();
                  }
  
                  function my_completion_handler(msg) {
                      // extract URL out of PHP output
                      if (msg.match(/(http\:\/\/\S+)/)) {
                          var image_url = RegExp.$1;
                          // show JPEG image in page
                          document.getElementById('upload_results').innerHTML = 
                              '&lt;h1&gt;Upload Successful!&lt;/h1&gt;' + 
                              '&lt;h3&gt;JPEG URL: ' + image_url + '&lt;/h3&gt;' + 
                              '&lt;img src="' + image_url + '"&gt;';
  
                          // reset camera for another shot
                          webcam.reset();
                      }
                      else alert("PHP Error: " + msg);
                  }
              &lt;/script&gt;
  
              &lt;/td&gt;&lt;td width=50&gt;&amp;nbsp;&lt;/td&gt;&lt;td valign=top&gt;
                  &lt;div id="upload_results" style="background-color:#eee;"&gt;&lt;/div&gt;
              &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>WEBCAM.JS</p>
  
  <pre><code>window.webcam = {
      version: '1.0.9',
  
      // globals
      ie: !!navigator.userAgent.match(/MSIE/),
      protocol: location.protocol.match(/https/i) ? 'https' : 'http',
      callback: null, // user callback for completed uploads
      swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
      shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
      api_url: '', // URL to upload script
      loaded: false, // true when webcam movie finishes loading
      quality: 90, // JPEG quality (1 - 100)
      shutter_sound: true, // shutter sound effect on/off
      stealth: false, // stealth mode (do not freeze image upon capture)
      hooks: {
          onLoad: null,
          onComplete: null,
          onError: null
      }, // callback hook functions
  
      set_hook: function(name, callback) {
          // set callback hook
          // supported hooks: onLoad, onComplete, onError
          if (typeof(this.hooks[name]) == 'undefined')
              return alert("Hook type not supported: " + name);
  
          this.hooks[name] = callback;
      },
  
      fire_hook: function(name, value) {
          // fire hook callback, passing optional value to it
          if (this.hooks[name]) {
              if (typeof(this.hooks[name]) == 'function') {
                  // callback is function reference, call directly
                  this.hooks[name](value);
              }
              else if (typeof(this.hooks[name]) == 'array') {
                  // callback is PHP-style object instance method
                  this.hooks[name][0][this.hooks[name][1]](value);
              }
              else if (window[this.hooks[name]]) {
                  // callback is global function name
                  window[ this.hooks[name] ](value);
              }
              return true;
          }
          return false; // no hook defined
      },
  
      set_api_url: function(url) {
          // set location of upload API script
          this.api_url = url;
      },
  
      set_swf_url: function(url) {
          // set location of SWF movie (defaults to webcam.swf in cwd)
          this.swf_url = url;
      },
  
      get_html: function(width, height, server_width, server_height) {
          // Return HTML for embedding webcam capture movie
          // Specify pixel width and height (640x480, 320x240, etc.)
          // Server width and height are optional, and default to movie width/height
          if (!server_width) server_width = width;
          if (!server_height) server_height = height;
  
          var html = '';
          var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) + 
              '&amp;shutter_url=' + escape(this.shutter_url) + 
              '&amp;width=' + width + 
              '&amp;height=' + height + 
              '&amp;server_width=' + server_width + 
              '&amp;server_height=' + server_height;
  
          if (this.ie) {
              html += '&lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"&gt;&lt;param name="allowScriptAccess" value="always" /&gt;&lt;param name="allowFullScreen" value="false" /&gt;&lt;param name="movie" value="'+this.swf_url+'" /&gt;&lt;param name="loop" value="false" /&gt;&lt;param name="menu" value="false" /&gt;&lt;param name="quality" value="best" /&gt;&lt;param name="bgcolor" value="#ffffff" /&gt;&lt;param name="flashvars" value="'+flashvars+'"/&gt;&lt;/object&gt;';
          }
          else {
              html += '&lt;embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" /&gt;';
          }
  
          this.loaded = false;
          return html;
      },
  
      get_movie: function() {
          // get reference to movie object/embed in DOM
          if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
          var movie = document.getElementById('webcam_movie');
          if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
          return movie;
      },
  
      set_stealth: function(stealth) {
          // set or disable stealth mode
          this.stealth = stealth;
      },
  
      snap: function(url, callback, stealth) {
          // take snapshot and send to server
          // specify fully-qualified URL to server API script
          // and callback function (string or function object)
          if (callback) this.set_hook('onComplete', callback);
          if (url) this.set_api_url(url);
          if (typeof(stealth) != 'undefined') this.set_stealth( stealth );
  
          this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );
      },
  
      freeze: function() {
          // freeze webcam image (capture but do not upload)
          this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0, 0 );
      },
  
      upload: function(url, callback) {
          // upload image to server after taking snapshot
          // specify fully-qualified URL to server API script
          // and callback function (string or function object)
          if (callback) this.set_hook('onComplete', callback);
          if (url) this.set_api_url(url);
  
          this.get_movie()._upload( this.api_url );
      },
  
      reset: function() {
          // reset movie after taking snapshot
          this.get_movie()._reset();
      },
  
      configure: function(panel) {
          // open flash configuration panel -- specify tab name:
          // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
          if (!panel) panel = "camera";
          this.get_movie()._configure(panel);
      },
  
      set_quality: function(new_quality) {
          // set the JPEG quality (1 - 100)
          // default is 90
          this.quality = new_quality;
      },
  
      set_shutter_sound: function(enabled, url) {
          // enable or disable the shutter sound effect
          // defaults to enabled
          this.shutter_sound = enabled;
          this.shutter_url = url ? url : 'shutter.mp3';
      },
  
      flash_notify: function(type, msg) {
          // receive notification from flash about event
          switch (type) {
              case 'flashLoadComplete':
                  // movie loaded successfully
                  this.loaded = true;
                  this.fire_hook('onLoad');
                  break;
  
              case 'error':
                  // HTTP POST error most likely
                  if (!this.fire_hook('onError', msg)) {
                      alert("JPEGCam Flash Error: " + msg);
                  }
                  break;
  
              case 'success':
                  // upload complete, execute user callback function
                  // and pass raw API script results to function
                  this.fire_hook('onComplete', msg.toString());
                  break;
  
              default:
                  // catch-all, just in case
                  alert("jpegcam flash_notify: " + type + ": " + msg);
                  break;
          }
      }
  };
  </code></pre>
  
  <p>TEST.PHP</p>
  
  <pre><code>&lt;?php
  
          /* JPEGCam Test Script */
          /* Receives JPEG webcam submission and saves to local file. */
          /* Make sure your directory has permission to write files as your web server user! */
  
          $filename = date('YmdHis') . '.jpg';
          $result = file_put_contents( $filename, file_get_contents('php://input') );
          if (!$result) {
              print "ERROR: Failed to write data to $filename, check permissions\n";
              exit();
          }
  
          $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
  
          print $_SERVER['REQUEST_URI'];
  
          ?&gt;
  </code></pre>