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.
Códigos HTML 100% Optimizados
Suscríbete y recibe directamente en tu email, los mejores códigos HTML que necesitas para editar tu página web.
<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>
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