Dropbox como repositorio integrado en un sitio web



Para utilizar Dropbox como repositorio integrado en un sitio web solo debemos realizar los siguiente.

1. Tener una cuenta activa en Dropbox
2. Crear una cuenta en cloudwok.com y permitir que el app acceda a tu cuenta Dropbox.
3. una vez verificada tu cuenta en cloudwok, dentro de la administracion crear un trabajo nuevo. "Create another CloudWok"
4. Lo configuras y se obtiene un código como este cwok.me/u/294B (lo marcado con rojo lo necesitaremos en nuestra configuración)
5. Implementamos el siguiente codigo HTML y CSS en donde queremos que se cree la subida de archivos.

Mejora tu sitio web y obtén más clientes

Suscríbete y conoce las características que tu sitio web necesita para convertirse en un imán de potenciales clientes
  • Multiplica tus ingresos aprovechando al máximo tu sitio web.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a una web optimizada.

Tus datos están 100% seguros.

<div class="cloudwok-embed" data-wokid="XXXX">
<div class="cloudwok-upload-files">
</div>
<form class="cloudwok-upload">
<div class="cloudwok-dropzone">
</div>
</form>
<div class="cloudwok-tos-checkbox">
</div>
<div class="cloudwok-upload-message">
</div>
</div>
<style type="text/css">
    .cloudwok-embed .dropzone {
        background: #09758E !important;
        color: #D9E7FF !important;
        border: solid 3px #425BAC !important;
    }
    .cloudwok-embed .dropzone .filepicker {
        background: #5877C1 !important;
        color: #D9E7FF !important;
        border: solid 1px #425BAC !important;
    }
    .cloudwok-embed .btn-start-upload {
        background: #186EAB !important;
        color: #FFFFFF !important;
        border: solid 1px #135A8C !important;
    }
</style> <script>
    var cloudWokConfig = {
        "dropzone": {
            "label": "ARRASTRAR Y SOLTAR, O",
            "button": "ELEGIR ARCHIVO"
        },
        "success": {
            "message": {
                "title": "ENVIÓ EXITOSO",
                "subtitle": "Archivo enviado con éxito!",
                "text": "Gracias, nos pondremos en contacto con usted lo más pronto posible",
                "button": "CONTINUAR",
                "noButtonOwnCW": true,
                "dontpopup": false,
                "dontslideup": true,
                "dontfadeout": true
            },
            "redirect": ""
        },
        "form": {
            "email": {
                "placeholder": "Ingrese un email valido",
                "optional": false
            },
            "name": {
                "firstname": {
                    "placeholder": "Ingrese su nombre",
                    "required": false
                },
                "lastname": {
                    "placeholder": "Ingrese su apellido",
                    "required": false
                }
            },
            "message": {
                "placeholder": "Escriba un mensaje",
                "rows": 3,
                "optional": true
            },
            "button": "CARGAR Y ENVIAR",
            "sent": "EL ARCHIVO HA SIDO CARGADO Y EL MENSAJE ENVIADO"
        },
        "terms": {
          "show": true,
          "popup": true,
          "text": {
            "before": "Antes de subir el archivo...",
            "agree": "Acepte los siguientes términos de servicio:",
            "title": "Términos de Servicio",
            "main": "El uso y navegación del sitio web que presta AdaptacionesWeb constituye la aceptación de nuestras política de privacidad y el consentimiento a nuestras acciones en relación a su información personal. Al enviar el archivo usted esta consciente que acepta nuestra política de privacidad y términos de uso en general"
          },
          "checkbox": {
            "text1": "Estoy de acuerdo con los ",
            "text2": "Términos de servicio",
            "invalid": "No se puede iniciar la subida. Por favor, haga clic en la casilla de verificación primero para estar de acuerdo con los Términos de servicio y vuelva a cargar el archivo."
          }
        }
    };
    document.querySelector(".cloudwok-embed").setAttribute("data-config",
    JSON.stringify(cloudWokConfig));
    (function(window, document) {
    var loader = function() {
    var script = document.createElement("script"),
    tag = document.getElementsByTagName("script")[0];
    script.src = "https://www.cloudwok.com/cdn-vassets/javascripts/cw.js";
    tag.parentNode.insertBefore(script, tag);
    };
    window.addEventListener ? window.addEventListener("load", loader, false) :
    window.attachEvent("onload", loader);
    })(window, document);
</script>
6. Cambiar el texto a mostrar conforme a los datos del sitio web. 

Asi quedo el mio, te lo dejo de ejemplo: http://adaptacionesweb.blogspot.com/p/subir-archivo.html

Con esto ya esta lista nuestra pagina de repositorio con Dropbox. Recuerda cambiar las "XXXX" por el código propio que te dio cloudwok.com   
¿TE PARECE COMPLICADO TODO ESTO? LO HAGO PARA TI

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web.¡Suscríbete Ahora!

Siguiente
« Anterior Post